网站制作 文案,做电子商务网站 语言,wordpress扫码阅读,衡水网站托管我们经常看到一些网站都有主题切换#xff0c;例如vue官方文档。那他是怎么实现的呢#xff1f; 检查元素#xff0c;发现点击切换时#xff0c;html元素会动态的添加和移除一个class:dark#xff0c;然后页面主题色就变了。仔细想想#xff0c;这要是放在以前#xff0…我们经常看到一些网站都有主题切换例如vue官方文档。那他是怎么实现的呢 检查元素发现点击切换时html元素会动态的添加和移除一个class:dark然后页面主题色就变了。仔细想想这要是放在以前可能要写两套样式就像这样
body {background-color: #fff;
}
body.dark {background-color: #000;
}这写起来得多麻烦啊而且难以维护。
好在我们有CSS变量早在2017年微软宣布Edge浏览器将支持CSS变量现在几乎所有的浏览器都已经支持了这个功能。IE啊这
css变量也是变量就像js一样先声明再读取。
body {--text-color: red;
}
.box {color: var(--text-color);
}已经出来很多年了今天就不详细介绍了有兴趣的推荐阅读 阮一峰老师的《CSS 变量教程》
今天就用vue3项目来写一个基于css变量实现的主题切换demo。
创建一个vue3项目
npm create vuelatest创建一个theme.css文件。
/***默认主题*/
:root {--bg: #fff;--text-color: #000;
}
/***添加属性用来控制暗黑模式时的样式*/
html[data-themedark] {--bg: #000;--text-color: #fff;
}或者像vue文档中一样使用class如下所示
:root {--bg: #fff;--text-color: #000;
}
html.dark {--bg: #000;--text-color: #fff;
}但是如果某个页面内无意中野使用到同名dark这个class可能会造成影响我这里还是用属性。
在main.js中引入一下theme.css。
import ./assets/theme.cssimport { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)在App.vue style中调用一下变量并动态改变data-theme的值
templatemainp主题切换demo/pbutton clickchange切换/button/main
/template
scriptlet theme lightconst change () {theme theme light ? dark : lightdocument.documentElement.setAttribute(data-theme, theme)}
/scriptstyle scoped
main {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: var(--bg);color: var(--text-color);
}
p {margin: 20px 0;
}
/style看看效果 功能基本上已经实现了再来把这个切换操作封装成一个组件并全局实时共享主题数据。
创建一个useTheme.js用来执行设置属性的操作
import { ref, watchEffect } from vue// 默认用亮色
const theme ref(light)// 每次改变都设置一下
watchEffect(() {document.documentElement.setAttribute(data-theme, theme.value)
})export default function useTheme() {return {theme}
}创建一个switch-theme.vue组件仅仅用来改变theme的值
templateel-switch v-modeltheme:active-action-iconMoon:inactive-action-iconSunnyactive-color#2f2f2factive-valuedarkinactive-valuelightchangechangeDark/el-switch
/templatescript setupimport { Sunny, Moon } from element-plus/icons-vueimport useTheme from ../hooks/useThemeconst { theme } useTheme()const changeDark (data) {theme.value data}
/script改一下App.vue文件引入并使用ThemeSwitch组件和useTheme Hook
templatemainp主题切换demo/pThemeSwitch/ThemeSwitchp当前主题{{theme}}/p/main
/templatescript setupimport ThemeSwitch from ./components/theme-switch.vueimport useTheme from ./hooks/useThemeconst { theme } useTheme()
/scriptstyle scoped
main {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-color: var(--bg);color: var(--text-color);
}
p {margin: 20px 0;
}
/style再看看效果 现在由一个专门的组件用来控制切换主题并且不同组件内也都能共享theme变量了。
最后再优化一下目前默认是亮色切换到暗色以后再刷新页面又会回到亮色可以把theme变量存到localstorage。
修改一下useTheme.js:
import { ref, watchEffect } from vue// 从取缓存中取值给个默认值。
const theme ref(localStorage.getItem(theme) || light)// 每次改变都设置一下属性并存到缓存中。
watchEffect(() {document.documentElement.setAttribute(data-theme, theme.value)localStorage.setItem(theme, theme.value)
})export default function useTheme() {return {theme}
}全部代码见Github
