1.html上面挂载属性data-theme
切换主题事件:
toggleTheme(dark: boolean) { if (dark) { this.theme = 'dark'; window.document.documentElement.setAttribute('data-theme', 'dark'); } else { this.theme = 'light'; window.document.documentElement.setAttribute('data-theme', 'light'); } },
2.处理样式 less
global.css 样式在main.js 导入
import '@/assets/style/global.less';
global.css文件-导入主题文件:
@import url("./theme-light.less"); @import url("./theme-dark.less");
主题文件 theme-dark.less:
[data-theme=dark] { 在此处写主题样式 }
标签:global,颜色,less,网站,主题,dark,theme,切换,data From: https://www.cnblogs.com/zhulongxu/p/18457993