在vue3里使用scss实现简单的换肤功能

实现的换肤功能：主题色切换、亮色模式和暗黑模式切换、背景图切换

主题色就是网站主色，可以配置到组件库上面；亮色模式又分为两种风格：纯白风格和背景图风格，不需要背景图的话可以删掉这部分逻辑和相关定义；暗黑模式就是黑底白字。

写法仅在vue3里有效，vue2或其他框架自行修改写法

换肤示例

scss文件定义

先在variables.module.scss文件定义并导出初始样式
注意此文件必须以.module.scss结尾

$main-color: #1677ff;// while
$while-bg-color: #fafafa;
$while-first-text: #000000e0;
$while-second-text: #000000a6;
$while-third-text: #00000040;
$while-box-bg-color: rgba(255, 255, 255, 0.6);
//dark
$dark-bg-color: #141414;
$dark-first-text: #ffffffd9;
$dark-second-text: #ffffffa6;
$dark-third-text: #ffffff40;
$dark-box-bg-color: rgba(255, 255, 255, 0.05);:export {MainColor: $main-color;//whileWhileBgColor: $while-bg-color;WhileFirstText: $while-first-text;WhileSecondText: $while-second-text;WhileThirdText: $while-third-text;WhileBoxBgColor: $while-box-bg-color;//darkDarkBgColor: $dark-bg-color;DarkFirstText: $dark-first-text;DarkSecondText: $dark-second-text;DarkThirdText: $dark-third-text;DarkBoxBgColor: $dark-box-bg-color;
}

然后在base.scss里定义不同模式下的css属性
此文件可以随意命名

@import "./variables.module";:root {--main-width: 1280px;// 切换背景图需要的变量--base-background:url('../bgImgs/bgImg_53.jpeg');
}
// 亮色模式下文字颜色变量
html[data-theme='light']:root{--first-lv-text: #{$while-first-text};--second-lv-text: #{$while-second-text};--third-lv-text: #{$while-third-text};--box-bg-color: #{$while-box-bg-color};
}
// 暗色模式下的文字颜色变量
html[data-theme='dark']:root{--first-lv-text: #{$dark-first-text};--second-lv-text: #{$dark-second-text};--third-lv-text:#{$dark-third-text};--box-bg-color: #{$dark-box-bg-color};
}html[data-theme='dark']{div,p,span,a,h1,h2,h3,h4,h5,h6,h7,ul,li,button,i{color: #{$dark-first-text};}
}

然后在mian.scss里引入这两个文件并使用css变量

@import './base.scss';
@import "./variables.module";
body {min-width: var(--main-width);overflow-x: hidden;background: var(--base-background) left top no-repeat;background-size: cover;transition: all 0.3s ease;
}

修改主题方法定义

然后在store里定义需要的方法

先定义下ts类型themeTypes.ts（没有ts的可以忽略）

export interface themeType {mode: themeModebgImg: stringisWhile: booleanisDark: booleanmainColor: string
}
export enum themeMode {light = 'light',dark = 'dark'
}

再定义个修改css变量的工具类

/** 修改css样式* @param {string} property css属性名* @param {string} value 要修改的值*/
export function setCssProperty(property: string, value: string) {document.documentElement.style.setProperty(property, value);
}

然后在theme.ts里定义

因为亮色模式下分为纯白和背景图，所以需要mode + isWhile和isDark来区分是亮色模式还是暗黑模式，不需要背景图的话可以修改这部分逻辑

亮色模式和暗黑模式修改关键代码：window.document.documentElement.setAttribute(‘data-theme’, themeMode.light)

import { computed, reactive, ref } from 'vue'
import { defineStore } from 'pinia'
import { themeMode, type themeType } from './types/themeTypes'
import { setCssProperty } from '@/utils/index'
import variable from '@/assets/styles/variables.module.scss'export const useThemeStore = defineStore('theme', () => {/*** 主题分为两种模式：亮色和暗黑* 亮色下又分为两种风格：纯白色风格 和 背景图风格* 暗黑模式就是纯黑背景模式* 三种风格不可兼容* */const theme = reactive<themeType>({mode: themeMode.light,// 修改为你真实的背景图地址bgImg: new URL('@/assets/bgImgs/bgImg_53.jpeg', import.meta.url).href, // 仅在mode === light时生效isWhile: false, // 仅在mode === light时生效isDark: false,mainColor: variable.MainColor})const setTheme = (mode: themeMode, imgUrl?: string) => {theme.mode = mode// theme.isWhile为true表示使用纯白模式；确保isDark为false，并且移除背景图，背景色修改为纯白if (theme.isWhile && mode === themeMode.light) {theme.isDark = falsewindow.document.documentElement.setAttribute('data-theme', themeMode.light)setCssProperty('--base-background', variable.WhileBgColor)} else if (theme.isDark && mode === themeMode.dark) {// 暗黑模式，确保isWhile为false，并且移除背景图，背景色为纯黑theme.isWhile = falsewindow.document.documentElement.setAttribute('data-theme', themeMode.dark)setCssProperty('--base-background', variable.DarkBgColor)} else {// theme.isWhile和theme.isWhile都为false表示使用背景图，此时mode必须为lighttheme.mode = themeMode.lighttheme.isWhile = falsetheme.isDark = falsetheme.bgImg = imgUrl || theme.bgImgwindow.document.documentElement.setAttribute('data-theme', themeMode.light)setCssProperty('--base-background', `url(${theme.bgImg})`)}// 这里把配置存在了本地，有条件的可以存在后台跟用户绑定用接口加载localStorage.setItem('theme', JSON.stringify(theme))}
//页面加载时使用此方法加载配置的主体const loadTheme = () => {const localTheme = localStorage.getItem('theme')if (theme) {Object.assign(theme, JSON.parse(localTheme as string))setTheme(theme.mode, theme.bgImg)}}return {theme,setTheme,loadTheme}
})

使用

然后在换肤vue文件里使用这些方法，注：template非完整代码，仅示例如何调用

<template>
<!--修改主题色我使用的vue3-colorpicker组件 --><ColorPickeris-widgetpicker-type="chrome"shape="square"v-model:pure-color="theme.mainColor"format="hex"@pureColorChange="setMainColor"/><!--修改为纯白 暗黑模式--><div class="use-style"><span>纯白</span><a-switch v-model:checked="theme.isWhile" @change="themeStore.setTheme(themeMode.light)" /></div><div class="use-style"><span>暗黑</span><a-switch v-model:checked="theme.isDark" @change="themeStore.setTheme(themeMode.dark)" /></div><!--选择皮肤(纯白/暗黑模式下,不能选择)--><div class="img-list"><divv-for="(img, index) in bgImgList":key="index"class="img-item"><img:src="img":alt="'皮肤' + index":style="{ cursor: theme.isWhile || theme.isDark ? 'not-allowed' : 'pointer' }"loading="lazy"@click="useImg(img)"/><CheckCircleFilled v-if="theme.bgImg === img" class="selected-icon" /></div></div>
</template>
<script setup lang="ts">import { reactive, ref, watch } from 'vue';// 把sotre和类型导入进来import { useThemeStore } from '@/stores/theme';import { themeMode } from '@/stores/types/appTypes';import { ColorPicker } from 'vue3-colorpicker';import 'vue3-colorpicker/style.css';import { storeToRefs } from 'pinia';const themeStore = useThemeStore();const { theme } = storeToRefs(themeStore);themeStore.loadTheme();const bgImgList = reactive<string[]>([]);const imgCurrent = ref(1);
// 获取图片列表，我这样写是因为放在了本地，根据你的实际情况修改function getBgImgList() {for (let i = 0; i < 100; i++) {bgImgList.push(new URL(`../../assets/bgImgs/bgImg_${i}.jpeg`, import.meta.url).href);}}onMounted(()=>{getBgImgList();})
// 设置主题色，function setMainColor() {localStorage.setItem('theme', JSON.stringify(theme.value));}function useImg(imgUrl: string) {if (theme.value.isWhile || theme.value.isDark) return;themeStore.setTheme(themeMode.light, imgUrl);}
</script>

如果使用了组件库,别忘了把主题色配置到组件上

 <template><a-config-provider:locale="zhCN":theme="{algorithm: appStore.theme.isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,token: {colorPrimary: appStore.theme.mainColor,},}"><a-app><RouterView /></a-app></a-config-provider>
</template><script setup lang="ts">import zhCN from 'ant-design-vue/es/locale/zh_CN';import {  theme } from 'ant-design-vue';import { useThemeStore } from '@/stores/theme';const themeStore = useThemeStore();
</script>

要在不同模式下修改组件库的样式,可以创建如antDesign.scss文件来修改

// 主题兼容
html[data-theme='light']{.ant-layout-sider{background: rgba(255,255,255,0.4);}.ant-layout-header{background: rgba(255,255,255,0.2);}
}
html[data-theme='dark']{.ant-layout-sider{background: rgba(255,255,255,0.08);}.ant-layout-header{background: rgba(255,255,255,0.05);}
}

需要其他配置可以自行往关键文件里添加