轻松搞定一键切换主题色?分享 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 变量,在项目中按需设置对应的元素即可。

相关推荐
江城开朗的豌豆2 分钟前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing11 分钟前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
遂心_14 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark14 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_15 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy15 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy15 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼15 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子16 小时前
迭代器和生成器
前端·javascript
洋葱头_17 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js