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

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

0 голосов
/ 06 февраля 2019

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

Скажем, если пользователь взял Зеленый , тогда я хочу использовать Зеленый для основного заголовка, зеленый с непрозрачностью 0,6 для заголовков таблицы и зеленый с непрозрачностью 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 Ответ

0 голосов
/ 06 февраля 2019

Если я правильно понимаю ваш запрос, вы можете манипулировать 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>
...