elementui主题切换（element-plus项目主题换肤与暗黑模式） -

暗黑模式在过去几年中最受欢迎，各大操作系统也全部支持了暗黑模式，并在浏览器中提供了查询是否开启暗黑模式的接口。接下来以vue3的element-plus为例，通过切换全局css变量的方式，实现主题换肤与暗黑模式设置。

一、主流换肤实现思路

1. 修改全局CSS变量

在全局css文件或 app.vue中定义全局CSS变量

<style>


:root{
--background_color:red
}

</style>

其他组件使用全局CSS变量

<style scoped>


.test{
background: var(--background_color);
}

</style>

切换主题（修改全局CSS变量）

const changeTheme = () => { document.documentElement.style.setProperty("--background_color","green"); }

2. 切换主题CSS文件

新建多套主题的css文件，放在assets文件夹的css文件夹中

# assets/css/theme_green.css .bg { background: green; }

# assets/css/theme_red.css .bg { background: red; }

设置默认主题（初始化样式）

# src/App.vue import {onMounted} from "vue"; onMounted(() => { let link = document.createElement('link'); link.type = 'text/css'; link.id = "theme"; link.rel = 'stylesheet'; link.href = 'assets/css/theme_red.css'; document.getElementsByTagName("head")[0].appendChild(link); },

切换主题

const changeTheme = () => { document.getElementById('theme').href = 'assets/css/theme_green.css' }

3. 使用css预处理器（例如 scss，通过mixin混入器切换）

新建一个scss文件，里面配置不同的主题配色方案

$themes: ( light: ( //字体 font_color1: #414141, font_color2: white, //背景 background_color1: #fff, background_color2: #f0f2f5, ), dark: ( //字体 font_color1: #a7a7a7, font_color2: white, //背景 background_color1: #1b2531, background_color2: #283142, ) );

定义另外一个sass文件，来操作前面的$theme变量（当然两个文件可以合并，分开写是想把配置和操作解耦）

@import "./_themes.scss";


//遍历主题map

@mixin themeify {

    @each $theme-name, $theme-map in $themes {

        //!global 把局部变量强升为全局变量

        $theme-map: $theme-map !global;

        //判断html的data-theme的属性值  #{}是sass的插值表达式

        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot

        [data-theme="#{$theme-name}"] & {

            @content;

        }

    }

}
//声明一个根据Key获取颜色的function

@function themed($key) {

    @return map-get($theme-map, $key);

}
//获取背景颜色

@mixin background_color($color) {

    @include themeify {

        background-color: themed($color)!important;

    }

}

//获取字体颜色 @mixin font_color($color) { @include themeify { color: themed($color)!important; } }

在vue组件中使用，引入对应混入器

<style lang="scss" scoped> @import "@/style/_handle.scss"; .test { @include font_color("font_color1"); @include background_color("background_color1"); } </style>

切换主题

const theme = (type) => { window.document.documentElement.setAttribute( "data-theme", type ); }

二、项目案例

1. 思路分析

参考element-plus文档https://element-plus.gitee.io/zh-CN/guide/theming.html#更换主题色，element-plus提供了SCSS变量和CSS变量两种方式实现主题换肤。相比较而言，使用CSS变量实现更加便捷，代码也更易编写。

要想实现暗黑模式和明亮模式切换，首先使用vuex定义全局主题色已经是否开启暗黑模式变量并管理。然后创建一个颜色处理模块以及暗黑模式、主题色处理函数文件。最后根据需求，直接替换颜色即可。

2. 项目目录结构

3. vuex配置

state.js（定义状态变量，存放状态）

const state = { // 是否开启暗黑模式 dark: false, // 默认主题色 theme:'#409eff', } export default state

mutations.js（定义处理state状态的操作逻辑）

const mutations = { // 是否开启暗黑模式 setDark(state, value) { state.dark = value }, // 设置主题色 setTheme(state, value) { state.theme = value }, } export default mutations

index.js（此处使用vuex-along实现状态持久化管理）

import {createStore} from 'vuex' import mutations from '@/store/mutations' import state from "@/store/state"; import createVuexAlong from 'vuex-along'

export default createStore({ state, mutations, plugins: [ createVuexAlong({ local: { list: [ ], }, session: { list: ["dark", "theme"], } }) ] })

3. 定义颜色处理模块

color.js（定义颜色变量值）

// 颜色管理 import {ref} from "vue";


function color() {

// 主题颜色变量组

const themeList = ref([

{name: '拂晓蓝(默认)', value: '#409eff'},

{name: '薄暮红', value: '#e74c3c'},

{name: '火山橘', value: '#e67e22'},

{name: '日暮黄', value: '#f1c40f'},

{name: '极光绿', value: '#16a085'},

{name: '酱紫', value: '#9b59b6'},

])

// 明亮模式全局颜色

const lightList = ref([

{name: '--el-background-color-base', value: '#f5f7fa'},

{name: '--el-color-white', value: '#ffffff'},

{name: '--el-text-color-primary', value: '#303133'},

{name: '--el-text-color-regular', value: '#606266'},

{name: '--el-color-primary-light-9', value: '#ecf5ff'},

{name: '--el-border-color-base', value: '#dcdfe6'},

{name: '--el-border-color-light', value: '#e4e7ed'},

{name: '--el-border-color-extra-light', value: '#f2f6fc'},

{name: '--el-border-color-lighter', value: '#ebeef5'},

])

// 暗黑模式全局颜色

const darkList = ref([

{name: '--el-background-color-base', value: '#000000'},

{name: '--el-color-white', value: '#141414'},

{name: '--el-text-color-primary', value: '#ffffff'},

{name: '--el-text-color-regular', value: '#d0d0d0'},

{name: '--el-color-primary-light-9', value: '#1f1f1f'},

{name: '--el-border-color-base', value: '#434343'},

{name: '--el-border-color-light', value: '#434343'},

{name: '--el-border-color-extra-light', value: '#5c5c5c'},

{name: '--el-border-color-lighter', value: '#434343'},

])

return {

darkList, themeList

}

}

export default color

dark.js（暗黑模式切换模块）

import {computed, onMounted, ref} from "vue"; import store from "@/store/index"; import color from "@/utils/color" import {useCssVar} from "@vueuse/core";


function dark() {

let {darkList, lightList} = color()

// 当前是否开启暗黑模式

const isDark = computed(() => store.state.dark)

// 切换暗黑模式

const setDark = (value) => {

store.commit('setDark', value)

console.log("执行切换开启暗黑模式事件：", isDark.value)

const el = ref(null)

if (isDark.value) {

console.log("要切换为暗黑模式")

darkList.value.forEach((item, index) => {

index = useCssVar(item.name, el)

index.value = item.value

})

} else {

console.log("要切换为明亮模式")

lightList.value.forEach((item, index) => {

index = useCssVar(item.name, el)

index.value = item.value

})

}

}

onMounted(() => {

// console.log("是否开启暗黑模式：",isDark)

setDark(isDark.value)

})

return {

setDark,

}

}

export default dark

theme.js（主题色切换模块）

import {computed, onMounted, ref} from "vue"; import store from "@/store/index"; import {useCssVar} from "@vueuse/core";


function theme() {

// 当前默认主题色

const themeValue = computed(() => store.state.theme)

// 切换主题色

const setTheme = (value) => {

store.commit('setTheme', value)

console.log("执行切换主题色事件：", themeValue.value)

const el = ref(null)

const primary_color = useCssVar('--el-color-primary', el)

primary_color.value = themeValue.value

}

onMounted(() => {

setTheme(themeValue.value)

})

return {

setTheme,

}

}

export default theme

4. element-plus组件主题配置

通过浏览器审查元素可知，element plus组件都使用了css全局变量色，切换暗黑主题时，只需要更改全局变量的值即可，切换主题时，更换el-color-primary的值即可。

5. 自定义组件主题配置

为了保持全局样式风格统一，自定义组件设置样式时，使用element-plus定义的全局变量即可。

.test { cursor: pointer; background-color: var(--el-color-primary); transition: all 0.5s; }

6. 组件调用切换主题和深色模式


<script setup>

import {ElMessageBox, ElMessage} from 'element-plus'

import {computed, onMounted, reactive, ref} from "vue";

import store from "@/store/index";

import dark from "@/utils/dark";

import color from "@/utils/color"

import theme from "@/utils/theme"
let {setDark} = dark()

let {setTheme} = theme()

let {themeList} = color()

//设置-菜单默认关闭

let drawer = ref(false);

//设置-菜单关闭事件

const handleClose = () => {

  drawer.value = false

};

// 设置-显示模式默认值

const isDark = ref(false)

// 设置-切换是否设置暗黑模式

const setDarkMode = () => {

  console.log("菜单栏执行切换事件", isDark.value)

  setDark(isDark.value)

}

// 设置-默认主题色

const colorValue = ref('')

// 设置-切换主题色事件

const colorChoose = (value) => {

  colorValue.value = value

  console.log(colorValue.value)

  setTheme(colorValue.value)

}

</script>
<style scoped lang="scss">
</style>

7. 跟随系统设置暗黑主题

使用 matchMedia 方法可以直接获取浏览器当前是否使用深色模式

App.vue

<template> <div class="router-view"> <router-view v-slot="{ Component }"> <component :is="Component"/> </router-view> </div> </template>


<script setup>

import {onMounted} from "vue";

import dark from "@/utils/dark";

let {setDark} = dark()

const locale = zhCn

onMounted(() => {

  const is_dark = window.matchMedia('(prefers-color-scheme: dark)').matches

  setDark(is_dark)

})
</script>
<style lang="scss">

.router-view { color: var(--el-text-color-primary); background-color: var(--el-background-color-base); transition: background 1s, color 0.6s; width: 100%; height: max-content; min-height: 100vh; position: absolute; top: 0; bottom: 0; margin: 0 auto; -webkit-overflow-scrolling: touch; animation-timing-function: linear; } </style>

三、效果演示

1. 设置暗黑模式与主题色菜单

2. 开启暗黑模式

3. 切换主题色（深色绿）

4. 切换主题色（浅色紫）

更多运维开发相关文章，欢迎访问崔亮的博客 https://www.cuiliangblog.cn

本文Hash：711efcb68a4b80077cbda71506eb127fdb286dfd

声明：此文由谢绝崇拜分享发布，并不意味赞同其观点。文章内容仅供参考，此文如侵犯到您的合法权益，请联系我们。

elementui主题切换（element-plus项目主题换肤与暗黑模式）

相关推荐