Sass实现网页背景主题切换
Sass 实现网页背景主题切换
- 前言
- 准备工作
- 一、 简单的两种主题黑白切换
- 1.定义主题
- 2. 添加主题切换功能
- 3. 修改 data-theme 属性
- 二、多种主题切换
- 1. 定义主题
- 2. 动态生成 CSS 变量
- 1.遍历列表
- 2.遍历映射
- 3.高级用法
- 3. 设置默认主题
- 4. 切换功能HTML
- 三、多种主题多种样式切换
- 1. 定义主题
- 2. 动态生成 CSS 变量
- 3. 设置默认主题
- 4. HTML代码
- ending
前言
网页实现主题切换一般有两种主流的解决办法，一种是css变量，另外一种是使用预编译器(less、sass)，这里考虑到兼容性使用的是sass来实现的
原理：修改网页中html标签内的自定义属性data-theme的样式。
准备工作
- 如果是工程项目则需使用下面代码进行安装
npm install sass --save-devnpm install sass-loader --save-dev
- 如果是html，则需要下载这个插件
使用方法也很简单在scss文件中点击这个就自动编译为css文件
这里的demo采用的是第二种
一、 简单的两种主题黑白切换
先看效果
1.定义主题
创建一个 index.scss 文件，用于定义不同的主题。
使用 Sass 的 map 和 mixin 功能来管理主题变量。
// index.scss
$themes: (light: (background-color: #ffffff,color: #000000),dark: (background-color: #000000,color: #ffffff)
);@mixin theme($name) {$theme: map-get($themes, $name);:root {background-color: map-get($theme, background-color);color: map-get($theme, color);}
}// 默认主题
@include theme(light);map-get 方法语法：
map.get(map,key): $map: 要操作的map变量， $key: 要获取值的键。如果map中不存在该键，则该方法会返回null。
2. 添加主题切换功能
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css">
</head><body><button id="theme-toggle">切换主题</button><script>const button = document.getElementById('theme-toggle');let currentTheme = 'light';button.addEventListener('click', () => {currentTheme = currentTheme === 'light' ? 'dark' : 'light';document.documentElement.setAttribute('data-theme', currentTheme);});</script>
</body></html>3. 修改 data-theme 属性
// index.scss
:root[data-theme='light'] {background-color: #ffffff;color: #000000;
}:root[data-theme='dark'] {background-color: #000000;color: #ffffff;
}二、多种主题切换
假如主题不止一套…
先看效果
具体实现跟方法一差不多，只是多用了@each这个方法
1. 定义主题
每个主题都有相应的背景色和文字色。
// index.scss
$themes: (light: (background-color: #ffffff,color: #000000,),dark: (background-color: #000000,color: #ffffff,),ocean: (background-color: #00aaff,color: #ffffff,),forest: (background-color: #228b22,color: #ffffff,),
);
2. 动态生成 CSS 变量
使用 @each 循环遍历 Sass map，为每个主题生成 CSS 变量。这里使用 的是映射
// index.scss
@mixin theme($name) {$theme: map-get($themes, $name);:root[data-theme='#{$name}'] {background-color: map-get($theme, background-color);color: map-get($theme, color);}
} @each $name, $properties in $themes {@include theme($name);
}关于@each 的使用方法
1.遍历列表
需要遍历一个列表（数组）时，可以使用 @each。每次迭代都会将当前项分配给一个指定的变量。
$colors: red, blue, green;@each $color in $colors {.text-#{$color} {color: $color;}
}
2.遍历映射
需要遍历一个映射（键值对）时，@each 可以用来遍历每个键值对。每次迭代都会将键和值分别分配给指定的变量。
$themes: (light: #ffffff,dark: #000000,ocean: #00aaff,forest: #228b22
);@each $name, $color in $themes {.theme-#{$name} {background-color: $color;}
}
3.高级用法
也可以使用 @each 来处理复杂的嵌套数据结构
$themes: (light: (background-color: #ffffff,text-color: #000000),dark: (background-color: #000000,text-color: #ffffff)
);@each $name, $properties in $themes {:root[data-theme="#{$name}"] {@each $property, $value in $properties {--#{$property}: #{$value};}}
}
3. 设置默认主题
// index.scss
@include theme(light);
4. 切换功能HTML
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css">
</head><body><button onclick="changeThemes('light')">切换白色</button><button onclick="changeThemes('dark')">切换黑色</button><button onclick="changeThemes('ocean')">切换蓝色</button><button onclick="changeThemes('forest')">切换绿色</button><script>function changeThemes(theme) {document.documentElement.setAttribute('data-theme', theme);}//页面初始化的时候加载,当然也可以使用其他方法changeThemes('light')</script>
</body>
</html>
三、多种主题多种样式切换
现在主题里面的变量不仅仅只有background-color,color 这两种，还可能会有其他变量，但是不可能又在root里面去加新增的代码，这样造成了冗余，维护起来也麻烦，于是有了新的思路代码…
先看效果
1. 定义主题
在这里每个主题里面自定义的css样式都是不一样的，这里只是举例
// index.scss
$themes: (light: (background-color: #ffffff,color: #000000,font-size:18px,font-weight: bold,),dark: (background-color: #000000,color: #ffffff,font-size:22px,border: 1px solid #9d11b9,),ocean: (background-color: #00aaff,color: red,font-size:26px,font-weight: bold,border: 1px solid #318b97,),forest: (background-color: #228b22,color: yellow,font-size:30px,border: 1px solid #c2557b,),
);
2. 动态生成 CSS 变量
这里使用的是@each的高级用法来处理复杂的嵌套数据结构
@each $name, $properties in $themes {:root[data-theme="#{$name}"] {@each $property, $value in $properties {#{$property}: #{$value};}}
}
3. 设置默认主题
@mixin theme($name) {:root[data-theme="#{$name}"] {@each $property, $value in map-get($themes, $name) {#{$property}: #{$value};}}
}// // 例如，应用默认主题白色
@include theme(light);
4. HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sass实现主题切换</title><link rel="stylesheet" href="index.css">
</head><body><button onclick="changeThemes('light')">切换白色</button><button onclick="changeThemes('dark')"> 切换黑色 </button><button onclick="changeThemes('ocean')">切换蓝色</button><button onclick="changeThemes('forest')">切换绿色</button><div>我是主题切换字体</div><script>function changeThemes (theme) {document.documentElement.setAttribute('data-theme', theme);}//页面初始化的时候加载,当然也可以使用其他方法changeThemes('light')</script>
</body></html>ending
Sass中文网地址Sass中文网
Less中文网地址Less中文网