这是我参与「第五届青训营」笔记创作活动的第三十一天
夜间模式 | 日间模式 的思考
反思
(⬆️项目链接)
这是之前写的一个基于Vue3的带有夜间与日间主题切换功能的应用，这里面主题的切换，是基于不同的类名，编写不同的样式表，然后通过动态修改类名来实现主题的切换，使用该方法编写的代码较为复杂，特别是CSS部分，十分地冗长啊！！！😵💫后续维护(比如说新增主题，或为后续页面开发适配)造成的开发成本较高，其实阅读性也很差啦
⬇️以下是旧思路(大概)
<div :class="className">
const className = {
classNameOne: true,
classNameTwo: false,
}
const switchTheme = () => {
className.classNameOne = !className.classNameOne;
className.classNameTwo = !className.classNameTwo;
}
reutrn claasName;
.classNameOne {
background-color: white;
}
.classNameTwo{
background-color: black;
}
在阅读了文章末尾提到的三篇文章后，新的实现是基于CSS Custom variable 和 属性选择器 还有 CSS var函数来实现的，当然需要注意不同浏览器的支持情况，在MDN可以详细查到
<script setup lang="ts">
// import ....(省略了)
const themeMode = ref("day");
const switchMode = () => {
themeMode = themeMode === "day" ? "night" : "day";
}
</script>
<template>
<div class="container":theme-mode="themeMode">
<div class="content"></div>
</div>
</template>
<style scoped>
.container[theme-mode="day"] {
--primary: white;
}
.container[theme-mode="day"] {
--primary: black
}
.content {
background-color: var(--primary);
}
</style>
通过这种方式实现的主题切换，逻辑更加清晰，且无需为每种主题额外编写CSS(如果大部分变更是集中于配色的变更的话)，后续添加新的主题，只需定义CSS变量即可，页面新组件的适配也很简单，只需填入变量名，无需关注具体颜色(比如之前到底使用了什么RGB值)
当然Vue3也引入了CSS-bind功能(没记错的话，也是基于CSS Custom Variable实现)，由此我们可以将CSS变量也放在JS部分中了，这样职能就更加清晰了，CSS就能更加专注于样式的实现
这两种方法我也都有实现，查看另外一种时，需将其中一种取消备注，而正在生效的那种需要被备注掉
详细代码可见⬇️
如果可以的话，请给我个⭐，不胜感激🙏
