logo

夜晚浏览网页太亮,试试夜晚模式吧,此以 vue3 为例

本项目自定义了两种模式,即白天模式和夜晚模式,当然可以添加更多的模式。

示例图

  1. 新建一个 base.scss 文件,里面写上需要的主题颜色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 主题
$themes: (
// 白天模式
light:
(
bgColor: #ebeaea,
textColor: #121212,
cardBgColor: #ffffff,
),
// 夜间模式
dark:
(
bgColor: #121212,
textColor: #ebeaea,
cardBgColor: #3a3a3a,
)
);
  1. 新建一个 theme.scss 文件,文件主要是解析 theme(这里主要是采自网上写法)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//遍历主题map
@mixin themeify {
@each $theme-name, $theme-map in $themes {
//!global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
//判断html的data-theme的属性值 #{}是sass的插值表达式
//& sass嵌套里的父容器标识 @content是混合器插槽,像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}

//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color) !important;
}
}

//获取字体颜色
@mixin font_color($color) {
@include themeify {
color: themed($color) !important;
}
}

//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color) !important;
}
}
  1. 新建 color.scss 文件,主要是自定义颜色样式,在项目任何地方即可使用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@import "./theme.scss";

// 页面背景色
.page-bgColor {
@include background_color("bgColor");
}

// 字体颜色
.basis-text-color {
@include font_color("textColor");
}

// 导航卡片的颜色
.nav-card-bgColor {
@include background_color("cardBgColor");
}
  1. 根据需求,切换主题。
  • 假如这里有一个切换的按钮(这里使用两个 icon 代替)
1
2
3
4
5
6
7
8
9
10
11
12
<div class="theme-icon">
<i
class="iconfont icon-yueduqi_yewanmoshi-98 title"
@click="handleChangeThemes"
v-if="themeData.isDark"
/>
<i
class="iconfont icon-baitianmoshi light title"
@click="handleChangeThemes"
v-else
/>
</div>
  • 点击切换按钮切换主题(这里是用 vue3,并将其 ts 代码分离)

新建一个 changeTheme.ts 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { onMounted, reactive } from 'vue'

export const changeTheme = () => {
const themeData = reactive({
isDark: false
})
const handleChangeThemes = () => {
themeData.isDark = !themeData.isDark
if (themeData.isDark) {
window.document.documentElement.setAttribute('data-theme', 'light')
} else {
window.document.documentElement.setAttribute('data-theme', 'dark')
}
}
onMounted(() => {
handleChangeThemes()
})
return { themeData, handleChangeThemes }
}
  • 在需要使用的页面引用即可
1
2
3
4
5
6
7
8
9
10
export default defineComponent({
name: "",
setup() {
const { themeData, handleChangeThemes } = changeTheme()
return {
themeData,
handleChangeThemes
}
}
})