使用element ui或者andt design,主题就用默认得就好了,记住几个口诀:padding margin取值 8px 16px 24px,font-size:12px 14px 16px,color:#333 #666 #999
原理将变量注入到body的样式里,改变主题色的时候修改变量的颜色即可。
scss变量 --color:red
放body的好处是全局可用。
if(sheme==="dark"){
document.getElementsByTagName('body')[0].style.setProperty('--color', `#27202E`);
}else{
document.getElementsByTagName('body')[0].style.setProperty('--color', `#ffffff`);
}
使用:
div:hover {
color: var(--color);
}
法2:
scss 筛选器.
App.vue
<style lang="scss">
:root {
--background-color: white;
--text-color: black;
}
[theme="dark"] {
--background-color: black;
--text-color: white;
}
</style>
xxxpage.vue
changeTheme() {
this.theme = this.theme == "dark" ? "light" : "dark";
document.documentElement.setAttribute("theme", this.theme);
},
<style scoped lang="scss">
.home {
background: var(--background-color);
}
</style>
[tips:scoped 给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式
如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性]
跟随系统的做法,是否为深色模式。
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
function darkModeHandler() {
if (mediaQuery.matches) {
console.log('现在是深色模式')
} else {
console.log('现在是浅色模式')
}
}
// 判断当前模式
darkModeHandler()
// 监听模式变化
mediaQuery.addListener(darkModeHandler)
简易的颜色翻转,并剔除emoji 图片等影响。【prefers-color-scheme】是自动读取系统的主题是否为深色模式。跟随系统。
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
background-color: rgb(29, 32, 31) !important;
}
img,
.astro-code,
.emoji {
filter: invert(100%);
}
}