vue3设置系统不同主题颜色

vue3设置系统不同主题颜色
theme.less

1. @import './variables.less';
3. :root {
4.         --color: #fff; // 默认主题颜色
5. }

复制代码

variables.less

1. .theme-blue{
2.   .buoy-list {
3.     --header-background: #1a70e5; // 头部标题&时间
4.     --li-background: rgb(20, 101, 194); // li选中和经过颜色
5.   }
6. }
8. .theme-yellow{
9.   .buoy-list {
10.     --header-background: #394a5f; // 头部标题&时间
11.     --li-background: rgba(51, 64, 89, 0.9); // li选中和经过颜色
12.   }
13. }

复制代码

其中theme-blue和theme-yellow是当前主题色,利用themeClass变量判断当前系统主题色

1. <div class="forecast-layout"  :class="themeClass"></div>

复制代码

设置颜色等样式，利用var()

1. .buoy-data-header {
2.   /* background-color: #1a70e5; */
3.   background: var(--header-background);
4.   margin-bottom: 5px;
5.   font-size: 14px;
6.   height: 30px;
7.   line-height: 30px;
8. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。