Question

我正试图在使用react和CSS模块构建的应用程序中动态改变颜色。我想每次都根据一种颜色显示补色。

为此，我手动定义了颜色

style: [

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

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

但这是一项长期工作，无法定义所有案例。

为此，我的问题是，是否有基于一种颜色参考（十六进制或rgb）获得补色，阴影等的等式

Answer 1

您可以通过两种方式实现：

CSS

对于所有CSS，请使用变量和mixins（有关更多信息，请阅读本文：http://thesassway.com/intermediate/mixins-for-semi-transparent-colors），但对于该代码：

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

定义颜色始终会创建一致性。然后，创建类似于以下内容的mixin：

```
@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做到这一点：

设置颜色的变量

$color00: #c80eff;
在按钮
中设置触发器
<button onClick="changeColor()" > Change color </button>
设置功能，其中包含以下内容：

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中的变量中设置它们，那么你只需在项目的其他地方重复使用它们。否则它最终会变得不一致。

动态改变颜色css

1 个答案: