динамически менять цвета CSS

Question

Я пытаюсь ускорить изменение цвета в моем приложении, построенном с использованием модулей реагирования и CSS.Я хочу отображать дополнительные цвета на основе одного цвета для каждого времени.

Для этого я определил свои цвета вручную

style: [

   {
        toolbarColor:'#c80eff',
        centerWidgetColor:'#0040ff',
        buttomWidgetColor:'#0040ff',
        rightWidgetColor:'#ffbf00',

    },
    {
        toolbarColor:'#c80eff',
        centerWidgetColor:'#fab81e',
        buttomWidgetColor:'#00ff9c',
        rightWidgetColor:'#12b274',
    },...

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

Для этого мой вопрос: существует ли какое-либо уравнение для получения дополнительных цветов, оттенков и т. д. на основе одного эталона цвета (hex или rgb)

Answer 1

Вы можете сделать это двумя способами:

CSS

1. Для всех CSS используйте переменные и миксины (для получения дополнительной информации читайте этоarticle: http://thesassway.com/intermediate/mixins-for-semi-transparent-colors), но для этого кода:

   $color00: #c80eff; $color02: #0040ff; $color03: #00ff9c;

Определение ваших цветов всегда создает согласованность.Затем создайте миксин, подобный следующему:

```
@mixin alpha-background-color($color, $background) {
  $percent: alpha($color01) * 100%;
  $opaque: opacify($color, 1);
  $solid-color: mix($opaque, $background, $percent);
  background-color: $solid-color;
  background-color: $color02;
}
```

Наконец, вы примените к своему элементу:

```
.button {
  @include alpha-background-color(rgba(black, 0.5), white);
}
```

В противном случае вы можете сделать это с помощью JS:

1. установить переменную для цвета

   $color00: #c80eff;

2. установить триггер на кнопку

   <button onClick="changeColor()" > Change color </button>

3. установить функцию, что-то в строках:

   const changeColor = ( opacity) => { const b = document.querySelector('.button'); let colorChange = b.style.backgroundColor; // change opacity b.style.opacity = `${opacity}`; }

   changeColor('set here the opacity you would want'); document.querySelector('.button').addEventListener('click', changeColor);

Краткое содержание и предложение:

Однако любой хороший проект будет иметь определенную цветовую палитру и стили, если вы установите их в переменных в CSS, то выпросто используйте их повсюду в проекте.В противном случае это будет противоречивым.