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

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

大家好,我是大澈!

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

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

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

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 变量,在项目中按需设置对应的元素即可。

相关推荐
山有木兮木有枝_12 分钟前
node文章生成器
javascript·node.js
yes or ok1 小时前
前端工程师面试题-vue
前端·javascript·vue.js
我要成为前端高手1 小时前
给不支持摇树的三方库(phaser) tree-shake?
前端·javascript
牧野星辰2 小时前
让el-table长个小脑袋,记住我的滚动位置
前端·javascript·element
_Congratulate2 小时前
vue3高德地图api整合封装(自定义撒点、轨迹等)
前端·javascript·vue.js
JohnYan2 小时前
Bun技术评估 - 23 Glob
javascript·后端·bun
海天鹰2 小时前
CSS变量
css
页面仔Dony2 小时前
Vue2 与 Vue3 深度对比
vue.js·前端框架
富婆苗子2 小时前
关于wangeditor的自定义组件和元素
前端·javascript
前端老鹰2 小时前
JavaScript Intl.RelativeTimeFormat:自动生成 “3 分钟前” 的国际化工具
前端·javascript