最近在开发个人博客，看到别人的博客都有黑夜模式感觉特别酷，这么酷的东西我的博客当然也要有啦！然后参考了网上的各种做法后实现了（如图）
（博客界面参考了Sara (poetize.cn)）
分析需求：
目前市面上有两种切换方式 一种是点击按钮实现手动切换，另一种是根据时间点进行自动切换，接下来我将分别实现这两种情况。
实现方式
按照思路想要实现切换主题，那就是要在手动/自动触发的点击事件里对页面中元素的颜色样式进行改变。 用JS改变颜色样式有：
①可以用JS直接对每个元素style直接进行设置
②也可以通过添加类名的方式整体切换
一个页面中这么多元素当然是类名切换的方式更方便，而且这样也更方便主题颜色的管理。接下来看看具体怎么实现吧！
处理样式
首先新建一个全局样式文件index.css，在样式文件中以变量的方式在:root中定义好白天的主题颜色，写一个类里面定义黑夜样式。如下所示。
:root{
/* 白天样式 */
--content-bgc:#fff;//内容的背景颜色
--box-bgc:#fff;//盒子的白
--box-shadow:0.2vw 0.2vw 1vw rgba(0,0,0,0.2);//卡片的阴影样式
--boxHoverShadow:0.5vw 0.5vw 1.1vw rgba(0,0,0,0.3); //边框hover的阴影样式
--fontNormal:#000;//常规
--settingColor:#000;//工具栏
}
.dark{
--content-bgc:#272727;//内容的背景颜色
--box-bgc:#272727;
--box-shadow:0 1px 20px -6px rgba(255, 255, 255, 0.406);
--boxHoverShadow:0.5vw 0.5vw 1.1vw rgba(0,0,0,0.3);
--settingColor:#fff;
--fontNormal:#fff;
}
手动切换模式
核心是对类名的切换。
template部分
<i class="iconfont icon-heiye" style="margin:0 20px;" @click="changeStyle"></i>
script部分
//改变黑夜模式
let isDark=ref(false)//是否是黑夜？
//手动切换点击事件
const changeStyle=()=>{
isDark.value=!isDark.value//点击切换模式
if(isDark.value===true){
document.body.classList.add('dark')//黑夜模式时添加类名
}else{
document.body.classList.remove('dark')//白天删除类名
}
}
实现刷新仍然保存状态
一个简单的黑夜白天切换就做出来啦，但是目前还是有些小缺陷的，如果我们切换黑夜模式后刷新页面又会变回白天模式，这样的用户体验就有点差了。那么如何实现保存状态呢？ ————把状态使用localStorage存在本地，并在页面渲染的时候先从本地获取当前状态确定渲染为何种模式调用相应的函数即可。
添加存储状态后的完整代码
//改变黑夜模式
let isDark=ref(false)
//进入页面时读取用户的设置偏好就可以在刷新时仍然可以拿到用户的设置偏好
let darkMode=localStorage.getItem('theme')
const goDark=()=>{
//黑夜的
document.body.classList.add('dark')
localStorage.setItem('theme','dark')
}
const goLight=()=>{
//白天的
document.body.classList.remove('dark')
localStorage.setItem('theme','light')
}
//根据本地存储状态判断
if(darkMode==='dark'){ goDark()}
//手动切换的点击事件
const changeStyle=()=>{
isDark.value=!isDark.value
if(isDark.value===true){
goDark()
}else{
goLight()
}
}
自动切换
实现到这里功能就没什么问题啦。我们还可以再根据自身需求进阶一下————根据时间自动判断是否切换黑夜模式。
想要实现根据时间自动切换只需要在setup生命周期中加上对时间的判断，若时间达到可以使用黑夜模式的条件即调用黑夜模式的函数，如下：
需要注意的是按照业务需求，该判断要写在根据存储的本地状态设置模式的前面。因为用户手动设置的优先级大于自动设置。
核心代码
//根据时间自动判断
let nowDate=new Date()
let hour=nowDate.getHours()
//黑夜时
if(hour>18&&hour<=24||hour<6){
goDark()
}
完整代码
//改变黑夜模式,枚举用ref限制类型
let isDark=ref(false)
//进入页面时读取用户的设置偏好就可以在刷新时仍然可以拿到用户的设置偏好
let darkMode=localStorage.getItem('theme')
const goDark=()=>{
//黑夜的
document.body.classList.add('dark')
localStorage.setItem('theme','dark')
}
const goLight=()=>{
//白天的
document.body.classList.remove('dark')
localStorage.setItem('theme','light')
}
//根据时间自动判断
let nowDate=new Date()
let hour=nowDate.getHours()
//黑夜时
if(hour>18&&hour<=24||hour<6){
goDark()
}
//根据本地存储状态哦按段
if(darkMode==='dark'){ goDark()}
//手动点击事件切换
const changeStyle=()=>{
isDark.value=!isDark.value
if(isDark.value===true){
goDark()
}else{
goLight()
}
}
