Question

我有一个要求，用户可以通过从提供的下拉菜单中设置自己的颜色来更改主题。基于这种颜色，我作为开发人员将对所有部分使用不同的阴影，如下所示

说，如果用户选择了 Green ，那么我想将 Green 用作主要标题，将Green的透明度设为0.6，表头，将Green的透明度设为不透明。活动/选定表行为0.5。

我尝试了以下格式，将变量传递给rgba不会影响背景颜色。

CSS

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

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

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

Answer 1

如果我正确理解了您的请求，则可以使用javascript处理CSS。
这里有一个working example来更改css变量的颜色和不透明度。

<!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>

使用scss和javascript应用动态颜色和不透明度

1 个答案: