今天使用CSS变量的一种方法
创建一个动态支持浅色，深色和彩色主题的网站。
互动演示
创建将改变的基本颜色。 将其绑定到html中的数据主题。
代码示例使用＆from less / scss语法
html[data-theme='green'] { --theme-color: 110; }
现在我们需要颜色本身。 或更确切地说，它们的亮度和饱和度。 为此，我们将使用hsl方案。 我们将所有变量放入：root。
:root { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; }
好吧 案件为小。 抓住所需的元素，然后将我们的变量应用于该元素。
.class-name { color: var(--color); background-color: var(--background-color); }
现在我们将改变对比度。 用html [with attribute]替换root。
// :root = html html { &[data-theme-style='normal'] { } &[data-theme-style='dark'] { } }
现在，对于每个主题，我们采用s，l值。
html { &[data-theme-style='normal'] { --color: ~'hsl(var(--theme-color), 15%, 44%)'; --background-color: ~'hsl(var(--theme-color), 30%, 10%)'; } &[data-theme-style='dark'] { --color: ~'hsl(var(--theme-color), 70%, 31%)'; --background-color: ~'hsl(var(--theme-color), 3%, 3%)'; } }
友情链接：
互动演示
谢谢Marcin Wichary的想法。