Apply dynamic color and opacity using scss and javascript

Question

I have a requirement where the user can change the theme by setting his own colors from the provided drop down. Based on this color me as a developer will apply different shades to all the sections as below

Say, if the user picked up Green then, I want to use Green for the primary header, and Green with opacity 0.6 for table headers, and Green with opacity 0.5 for active/selected table row.

I have tried the below format, passing a variable to rgba is not affecting the background color.

CSS

:root {
    --color: #008000;
    --alpha: 0.5;
}

#primary-header{
    background-color: rgba(var(--color));
}

#table-header{
    background-color: rgba(var(--color), var(--alpha));
}

passing variable to rgba is not affecting the background color — vinod, Feb 06 '19 at 12:39
Does this answer your question? [How do I apply opacity to a CSS color variable?](https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable) — Maciej, Oct 29 '20 at 19:11

Jonathan Applebaum · Accepted Answer · 2019-02-06T06:07:27.967

If i understand your request properly, you can manipulate the css using javascript.
here is a working example to change color and opacity of the css variables.

<!DOCTYPE html>
<html>
  <head>
    <style>
    :root {
    --currentColor: orange;
    --op: 0.9;
}
a {
  color: var(--currentColor)
  opacity: var(--op);
}
div {
  width: 100px;
  height: 100px;
  background-color: var(--currentColor);
  opacity: var(--op);
}
    </style>
  </head>
  <body>
    <select id="combo" onchange="changeColor()">
      <option>orange
      </option>
      <option>green
      </option>
      <option>red
      </option>
      <option>blue
      </option>
    </select>
    <div>
    </div>
    <select select id="combo2" onchange="changeColor()">
      <option>0.9</option>
      <option>0.8</option>
      <option>0.1</option>
      <option>0.5</option>
    </select>
    <script>
      function changeColor()
      {
        // get the color value from the select control
        var color = document.getElementById("combo").value;
        // apply css change
        document.documentElement.style.setProperty('--currentColor', color);
        // get the opacity value from the select control
        var color = document.getElementById("combo2").value;
        // apply css change
        document.documentElement.style.setProperty('--op', color);
      }
    </script>
  </body>
</html>

Apply dynamic color and opacity using scss and javascript

1 Answers1