likes
comments
collection
share

轻松搞定一键切换主题色？分享 1 段优质 CSS 代码片段！

作者站长头像
站长
· 阅读数 29

本内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 800+  字，整篇阅读约需 1 分钟。

今天分享一段优质 CSS 代码片段，轻松实现一键切换主题颜色，在任何项目中都可用。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

[data-theme='default'] {
  --font-primary: #fff;
  --background-main: #0678be;
}

[data-theme='black'] {
  --font-primary: #fff;
  --background-main: #393939;
}

<html lang="en" data-theme="default"></html>

body {
  color: var(--font-primary);
  background-color: var(--background-main);
}

分享原因

这段代码可以轻松实现网页主题的切换，且在各种项目中通用。

先定义不同主题的 CSS 变量，再通过 JavaScript 动态更改 data-theme 属性，从而实现页面样式的动态变化。

这种方法不仅简化了主题管理，还提高了代码的可读性和维护性，是我们项目中一般且常用的实现方式之一。

代码解析

1. 定义主题变量

CSS变量：声明自定义CSS属性，它包含的值可以在整个文档中重复使用。属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值。

CSS属性选择器：匹配具有特定属性或属性值的元素。例如[data-theme='black']，将选择所有 data-theme 属性值为 'black' 的元素。

使用 [data-theme='default'] 和 [data-theme='black'] 选择器，根据 data-theme 属性的值定义不同的主题样式。

定义了两个 CSS 变量 --font-primary 和 --background-main，分别表示字体颜色和背景颜色。

2. 指定默认主题

在  元素上添加 data-theme="default"，指定默认主题为 default 。

后面用 js 动态切换 data-theme 属性值，然后 CSS 属性选择器将自动选择对应的 CSS 变量。

3. 应用 CSS 变量

Var函数：用于使用 CSS 变量。第一个参数为 CSS 变量名称，第二个可选参数作为默认值。

使用 var(--font-primary) 和 var(--background-main) 来引用之前定义的 CSS 变量。

这里设置 body 元素的 color 和 background-color 属性，分别引用 --font-primary 和 --background-main 变量，在项目中按需设置对应的元素即可。

转载自:https://juejin.cn/post/7392806046699388939
评论
请登录