Примените динамический цвет и непрозрачность, используя scss и javascript

Question

Примените динамический цвет и непрозрачность, используя scss и javascript

У меня есть требование, когда пользователь может изменить тему, установив свои собственные цвета из выпадающего списка. На основе этого цвета я, как разработчик, буду применять разные оттенки ко всем разделам, как показано ниже.

Скажем, если пользователь выбрал 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));
}

-1

javascript html css scss-mixins

Источник

user7171384 06 фев '19 в 05:38

1 ответ

Другие вопросы по тегам javascript html css scss-mixins

user5718868 06 фев '19 в 05:51 2019-02-06 05:51 · Answer 1 · 2019-02-06 05:51

Если я правильно понимаю ваш запрос, вы можете манипулировать CSS с помощью JavaScript.
Вот рабочий пример изменения цвета и непрозрачности переменных 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>