Dynamically change color to lighter or darker by percentage CSS (Javascript)

Question

We have a big application on the site and we have a few links which are, let\'s say blue color like the blue links on this site. Now I want to make some other links, but wit

Answer 1

If you only need to change background color, this is a great approach that is futureproof - Use linear-gradient method on background image!

Check out the example below:

document
  .getElementById('colorpicker')
  .addEventListener('change', function(event) {
    document
      .documentElement
      .style.setProperty('--color', event.target.value);
  });

span {
  display: inline-block;
  border-radius: 20px;
  height: 40px;
  width: 40px;
  vertical-align: middle;
}

.red {
  background-color: red;
}

.red-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) red;
}

:root {
  --color: lime;
}

.dynamic-color {
  background-color: var(--color);
}

.dynamic-color-darker {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25)
  ) var(--color);
}

  

    
Static Color
    

    

  
  

    
Dynamic Color
    

    

  



Change the dynamic color: 

Credits: https://css-tricks.com/css-custom-properties-theming/