流浪のwolf

卷帝

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

实现网站颜色主题切换方案

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] {
  在此处写主题样式

}

 

posted on   朱龙旭的网络  阅读(39)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2023-10-11 简单 webapi 登录成功就返回 电脑的进程信息·
2023-10-11 webapi action 参数
2022-10-11 封装setItem 和 getItem 本地存储
2022-10-11 yarn serve 不能开启vue项目 the project seem to require yarn but isnot install
2022-10-11 vant 2 的 toast
2022-10-11 统一携带 token
2022-10-11 我的频道 推荐频道 和全部频道之间的关系
点击右上角即可分享
微信分享提示