切换浅色和暗夜模式的vue组件 darkmode-switch-btn

简单方案

第一步

在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 light 和 dark 两种模式

第二步

设置不同模式下的全局样式变量，供全局子元素引用，实现模式修改，全局样式一起修改的效果。

注：1.有些属性如background不能实现继承，所以要实现不同元素背景色的统一修改，只能是不同元素使用同一变量。模式修改，变量值会修改，从而实现样式的切换

// 字体
$font-light-color-1: #1b1b1b;$font-dark-color-1: #1b1b1b;//背景
$bg-light-color-1: #fff;$bg-dark-color-1: #1b1b1b;@mixin light-theme {color-scheme: light; // 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。--text-primary: #{$font-light-color-1};
}@mixin dark-theme {color-scheme:dark; // 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。--text-primary: #{$font-dark-color-1};
}:root{@media (prefers-color-scheme: light) {@include light-theme;}@media (prefers-color-scheme: dark) {@include dark-theme;}
}//颜色较多的情况，建议使用CSS变量对颜色值进行管理

第三步：

在项目中使用定义的变量，例如

.themeBtn {display: flex;flex-direction: row;justify-content: center;align-items: center;color: var(--text-primary);border: 1px solid var(--border-primary);cursor: pointer;}

darkmode-switch-btn的实现方案：

第一步：为html添加meta标签

    const html = document.documentElement;if (window && html) {   // 插入 meta 标签var oMeta = document.createElement("meta");oMeta.content = "light dark";oMeta.name = "color-scheme";document.getElementsByTagName("head")[0].appendChild(oMeta);}

第二步：初始化时，为html添加class

created(){const theme = window.localStorage.getItem("theme");this.mode=theme;const html = document.documentElement;if (window && html) {html.className = theme;html.style.backgroundColor = "";}},

第三步：切换主题时，改变html的class,使用不同模式的样式

handleCommand(theme) {const html = document.documentElement;if (window && html) {html.className = theme;html.style.backgroundColor = "";window.localStorage.setItem("theme", theme);this.mode = theme;}},

第四步：完成不同模式的css

// 字体
$font-light-color-1: #1b1b1b;$font-dark-color-1: #1b1b1b;//背景
$bg-light-color-1: #fff;$bg-dark-color-1: #1b1b1b;@mixin light-theme {color-scheme: light;// 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。--nav-bg:$bg-light-color-1
}
@mixin dark-theme {color-scheme: dark;// 浏览器提供的元素 UI 中使用的颜色与配色方案的意图相匹配。例如滚动条、拼写检查下划线、表单控件等。--nav-bg:$bg-dark-color-1
}.light{@include light-theme
}
.dark{@include dark-theme
}
:root:not(.light):not(.dark){@media (prefers-color-scheme: light) {@include light-theme;}@media (prefers-color-scheme: dark) {@include dark-theme;}
}

第五步：使用css变量

.themeBtn {display: flex;flex-direction: row;justify-content: center;align-items: center;color: var(--text-primary);border: 1px solid var(--border-primary);cursor: pointer;}

完成！

切换浅色和暗夜模式的vue组件 darkmode-switch-btn相关推荐

vue-class-component 以class的模式写vue组件
vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件.vue-class-component(以下简称Component)带来了很多便利: 1.me ...
使用lib库模式打包vue组件及组件引用
1.lib库模式打包vue组件语法: vue-cli-service build --target lib --name libName [entry] 示例: 当使用一个 .js 或 .ts 文件 ...
vue动态切换css文件_如何在vue组件中动态的引入css文件?
问题描述如标签描述的不准确,请见新直能分支调二浏页器朋代说谅我的需求是开的接都上的和,近很触是没他电同近很触是没发多套皮肤,打包的时候只加载其中某一种的皮肤(不需要动态换肤),因为css文件过大, ...
visual设计的界面发布到iis上显示不一样_Material Design暗夜模式设计指南
本文较长,大概需要12分钟阅读.不久前谷歌I/O大会召开,带来了对设计师来说最为重要的的暗夜模式.由于Android面对的用户相当广泛,相当严谨具体的暗夜模式设计规范已经悄然在Google Desig ...
vue组件定义、组件的切换、组件的通信、渲染组件的几种方式（标签、路由、render）...
vue中全局的概念是什么?---就是全局定义的功能,所有实例化的vm都可以使用, 全局定义的是挂在构造函数Vue上面的,所以实例化出的对象都可以使用这个功能 1.什么是组件?---从UI的角度把页面 ...
本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
vue 组件切换保持组件的状态 keep-alive
如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的.这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabCompo ...
vue组件化开发实践
前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

切换浅色和暗夜模式的vue组件 darkmode-switch-btn

darkmode-switch-btn的实现方案：

切换浅色和暗夜模式的vue组件 darkmode-switch-btn相关推荐

最新文章

热门文章