vue实现主题切换主题切换是一个比较常见的功能，比如国庆期间很多网站都会改变其主体色为大红色，一同庆祝国庆节的到来，那么

主题切换是一个比较常见的功能，比如国庆期间很多网站都会改变其主体色为大红色，一同庆祝国庆节的到来，那么这个功能如何实现呢，接下来我们一起来看看。

效果展示

切换主题.gif

实现思路

利用:root这个css伪类匹配文档树的根元素然后声明两套全局css变量，需要用到切换主题的地方都通过css变量来设置样式，最后通过js控制切换两套全局样式即可。

实现代码

1、准备两套css全局变量

// 日常模式
html[data-theme="daily"]:root {
    --header-bg: #fff;
    --header-text: #000;
    --header-border: #eaeaea;
    --header-shadow: #eaeaea;
    --main-bg: #fff;
}
// 国庆模式
html[data-theme="red"]:root {
    --header-bg: red;
    --header-text: #fff;
    --header-border: red;
    --header-shadow: red;
    --header-hover-text: red;
    --main-bg: #ddd;
}

2、通过变量设置样式

这个案例中，只有侧边栏导航和顶部logo才需要切换主题色，因此只需要在这两个地方通过变量来设置样式即可

.el-header {
    ...
    background-color: var(--header-bg);
 }
    
.el-aside {
    background-color: var(--header-bg);
    
    .el-menu {
        background-color: var(--header-bg);

        .el-menu-item {
            color: var(--header-text);
        }

        .el-menu-item:hover {
            color: var(--header-hover-text);
        }

        :deep(.el-sub-menu__title) {
            color: var(--header-text);

            &:hover {
                color: var(--header-hover-text);
            }
        }

        :deep(.el-menu--inline) {
            .el-menu-item {
                background-color: var(--header-bg);
                color: var(--header-text);
            }
        }

    }
}

3、封装函数切换当前主题模式

创建theme.js文件

export const useTheme = (model = "daily") => {
    window.document.documentElement.setAttribute("data-theme", model)
}

4、点击按钮切换主题

<div @click="onChangeTheme">切换主题</div>

import { useTheme } from "@/utils/theme";
const themeModel = ref("light")
const onChangeTheme = () => {
    themeModel.value = themeModel.value == 'daily' ? 'red' : 'daily'
    useTheme(themeModel.value)
}

vue实现主题切换