主要用到的方法

document.body.setAttribute(“data-theme”, ‘dark’);
window.matchMedia(‘(prefers-color-scheme: dark)’).matches

a.在全局组件中的配置

这里可以判断当前设备的主题色是什么，根据设备去实时刷新，主要用到的方法就是prefers-color-scheme，在js中可以写

if(window.matchMedia('(prefers-color-scheme: dark)').matches) {this.dark = truethis.$store.commit('SET_THEME','dark')Cookie.set('theme','dark',{expires:this.utilTime})}else {this.dark = falsethis.$store.commit('SET_THEME','light')Cookie.set('theme','light',{expires:this.utilTime})}
}

放入仓库是用来判断刚进入时就变换主题色，尽量不让加载完成后再过度，体验不好；
放入cookie是用来记录选择过主题后以后就不再重新选择，使用上次选择的主题色，超时时间设置9999年

this.utilTime = new Date('Fri, 31 Dec 9999 23:59:59 GMT')

css中直接使用也可以

@media (prefers-color-scheme: dark){}

1. 实时监听代码

onThemeListen(){if(window.matchMedia) {window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {let status = e.matches ? true : false;if (status) {this.dark = trueCookie.set('theme','dark',{expires:this.utilTime})this.$store.commit('SET_THEME','dark')document.body.setAttribute("data-theme", 'dark');}else {this.dark = falseCookie.set('theme','light',{expires:this.utilTime})this.$store.commit('SET_THEME','light')document.body.setAttribute("data-theme", 'light');}});}
},

2.点击切换主题代码

onDark(e) {if(Cookie.get('theme') == 'dark') {this.dark = falseCookie.set('theme','light',{expires:this.utilTime})this.$store.commit('SET_THEME','light')document.body.setAttribute("data-theme", 'light');}else {this.dark = trueCookie.set('theme','dark',{expires:this.utilTime})this.$store.commit('SET_THEME','dark')document.body.setAttribute("data-theme", 'dark');}
},

3.进入页面后根据cookie判断代码

（首次进入我的需求是默认设置黑夜，也可根据系统主题设置，即调用a中的onThemeDark()方法）

let temp = Cookie.get('theme')
if(temp) {if(temp == 'dark') {this.dark = truethis.$store.commit('SET_THEME','dark')document.body.setAttribute("data-theme", 'dark');this.$forceUpdate()}else {this.dark = falsethis.$store.commit('SET_THEME','light')document.body.setAttribute("data-theme", 'light');this.$forceUpdate()}
}else {// 首次进入根据是否是黑夜设置this.dark = truethis.$store.commit('SET_THEME','dark')Cookie.set('theme','dark',{expires:this.utilTime})document.body.setAttribute("data-theme", 'dark');this.$forceUpdate()// this.onThemeDark()
}

b.nuxt项目middleware和layouts配置

1.中间件中进行cookie设置到仓库中

import getCookie  from '../plugins/cookie.js'
export default function({store,req,app}){let isServer = process.server;if(req) {if(isServer) {store.state.theme = getCookie.getcookiesInServer(req).theme}}
}

2.布局文件中设置class类名

<template><div :class="$store.state.theme" ><Nuxt/></div>
</template>

3.加上在全局组件中设置的document.body.setAttribute(“data-theme”, ‘dark’);

body中也存在了dark属性

body[data-theme='dark'] {backgound-color: #000;}

c.黑夜的scss文件

类名有了，data-theme有了，css就好写了…

nuxt中应用

1.dark.scss 文件放在assets文件夹下，设置全局变量$color在common.scss中，直接修改使用
2. 变量在页面中使用会出错，安装@nuxtjs/style-resources，在nuxt.config.js中添加，当然还有css全局引入

css: ['element-ui/lib/theme-chalk/index.css','swiper/css/swiper.min.css','animate.css/animate.css','~assets/common.scss','~assets/dark.scss'
],
modules: ['@nuxtjs/style-resources'
],
styleResources:{scss:['./assets/common.scss','./assets/dark.scss'],
},

3.设置黑色后会从白色闪烁次到黑色主题，或者默认黑色但显示白天时闪烁黑色的，所以可以在中间件中进行store设置，提前添加class

// 设置主题颜色
let theme = splitCookie('theme',req.headers.cookie)
store.commit("SET_THEME", theme);

其他

插写一条scss循环写法

@for $i from 1 through 10 {.text-ellipsis#{$i} {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: $i;line-clamp: $i;-webkit-box-orient: vertical;}
}

vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化相关推荐

vue动态切换css文件_vue在线动态切换主题色方案
主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css 具体实现步骤如下: 1.添加webpack插件,新建文件we ...
Android 12新特性之获取壁纸主色调并设置系统主题色
关注这个问题首先是因为我队友某天吐槽,说整些奇奇怪怪的东西不如整个什么手机自适应手机壳主题.当然这个东西不是那么好实现的,毕竟已经脱离了软件层面涉及到硬件层面了.但是,转念一想,是否可以弄一个自适 ...
ios设置tabbar背景颜色_WooCommerce微信小程序2.9.3版本发布后台设置主题色底栏装修定制...
更新又来咯! 本次更新主要以配置小程序方面的体验优化为主通过后台设置主题色以往更换小程序的主题色,需要重新下载小程序,万一小程序已经改动过,下载后又要重新修改一次本次更新后,主题色可直接在后台选 ...
计算机主题和桌面背景区别,xp系统主题，桌面背景，屏幕保护，分辨率等技巧设置...
XP系统是大家平时用的最多的,通过对XP显示技巧设置,可以打造自己的个性化电脑桌面,一般来说设置的多的是系统主题,桌面背景,屏幕保护程序,分辨率设置,屏幕刷新率这些. 1.电脑主题设置:首先右击电脑 ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
vue domo网站_DOMO与Tableau-逐轮
vue domo网站 Let me be your BI consultant. Best yet, let me be your free consultant on the following q ...
vue 什么是渐进式响应式意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是轻量的模型视图视图模型框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
vue nuxt 服务器渲染和缓存
vue nuxt 服务器渲染和缓存我们都知道vue,react,angular 是现在前端技术栈非常优秀的框架,但是跟上帝造人一样,没有任何东西是100%的完美.比如seo,单页面应用是不存在seo ...

vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化

a.在全局组件中的配置

1. 实时监听代码

2.点击切换主题代码

3.进入页面后根据cookie判断代码

b.nuxt项目middleware和layouts配置

1.中间件中进行cookie设置到仓库中

2.布局文件中设置class类名

3.加上在全局组件中设置的document.body.setAttribute(“data-theme”, ‘dark’);

c.黑夜的scss文件

nuxt中应用

其他

vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化相关推荐

最新文章

热门文章

vue nuxt网站设置黑夜 白天模式切换 自动识别系统主题色变化

a.在全局组件中的配置

1. 实时监听代码

2.点击切换主题代码

3.进入页面后根据cookie判断代码

b.nuxt项目middleware和layouts配置

1.中间件中进行cookie设置到仓库中

2.布局文件中设置class类名

3.加上在全局组件中设置的document.body.setAttribute(“data-theme”, ‘dark’);

c.黑夜的scss文件

nuxt中应用

其他

vue nuxt网站设置黑夜 白天模式切换 自动识别系统主题色变化相关推荐

最新文章

热门文章

vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化

vue nuxt网站设置黑夜白天模式切换自动识别系统主题色变化相关推荐