原生CSS实现系统切换主题色切换（VUE）

最新推荐文章于 2024-04-02 23:26:04 发布

Colossus丶

最新推荐文章于 2024-04-02 23:26:04 发布

阅读量143

点赞数

文章标签： css vue.js javascript

本文链接：https://blog.csdn.net/qq_40472157/article/details/131193475

版权

原生CSS实现系统切换主题色切换

创建全局css与主题色变量

/*变量*/
:root {
    --bg-color: rgba(5, 102, 238, 1);//默认值
    --c-color:#fff;
}
/*背景色*/
.g-bc{
    background-color:var(--bg-color);
}
.g-c{
    color:var(--c-color);
}

引入全局css文件

/*VUE项目为例在main.js引入*/
import '@/assets/global.css';

切换主题颜色

let a= document.getElementsByClassName('g-bc')[0]

a.style.setProperty("--bg-color",'red')//设置主题背景色为红色

/*获取目前主题背景颜色*/
a.style.getPropertyValue("--bg-color")