CSS_scss切换主题

目录assets/theme以下新建文件

_handle.scss

@import './_themes.scss';// 定义混合指令, 切换主题,并将主题中的所有规则添加到theme-map中
@mixin themify() {// 将themes中规则放入theme-map@each $theme-name,$theme-map in $themes {$theme-map: $theme-map  !global;[data-theme="#{$theme-name}"] & {// 表示包含下面函数 themed(), 类似于插槽@content;$theme-map : null !global;}}
}@function themed($key) {@return map-get($theme-map, $key);
}

_themes.scss

$themes: (
light:(main_background: #fff,text_color: #333,text_color1: #868C9A,text_color2: #868C9A,text_color3: #000000, //tab_background: #F5F5F5,tab_background1: #fff, //tab_background2: #868C9A, //active_line: #00D6CA,footer_background: #fff,btn_main: #00D6CA,color_main: #00D6CA,btn_background: #00D6CA, //按钮颜色btn_background1: #eff7ff, //按钮颜色btn_background2: #C8CAD2, //按钮颜色input_background: #F5F5F5,cont_background: #f6f6f6,
),
dark:(main_background: #121212, //主题色text_color: #fff, //文字颜色text_color1: #868D9A, //文字浅色text_color2: #fff, // 资金页面所用对应text_color3: #fff, //tab_background: #242424, //tab切换背景颜色tab_background1: #000, //tab切换背景颜色tab_background2: #242424, //tab切换背景颜色active_line: #00D6CA, //tab选中样式颜色footer_background: #1a1a1a, // 底部颜色btn_main: #00D6CA, //主题色按钮color_main: #00D6CA, //主题色文字btn_background: #474B62, //按钮颜色btn_background1: #112542, //按钮颜色btn_background2: #1B2134, //按钮颜色input_background: #242424, //input背景颜色cont_background: #242424, //title背景色
))

index.scss

@import './_handle.scss';.mainBackground {@include themify() {background: themed("main_background") !important;}
}.textColor {@include themify() {color: themed("text_color") !important;}
}

修改vue.config.js文件

const scss_path = `@/assets/theme/index.scss`module.exports = defineConfig({css: {loaderOptions: {scss: {additionalData: `@import "${scss_path}";`},}},
})

app.vue设置默认主题

mounted() {window.document.documentElement.setAttribute('data-theme', '替换本地存储的theme')
},

状态管理设置点击设置主题

// 获取localStorage
const getStorage = function (key) {const str = window.localStorage.getItem(key)if (!str) {return null}return JSON.parse(str)
}// 移除localStorage
const removeStorage = function (key) {window.localStorage.removeItem(key)
}
// 设置sessionStorage
const setSessionStorage = function (key, obj) {let json = JSON.stringify(obj)window.sessionStorage.setItem(key, json)// console.log('设置语言', key, json)
}const changeTheme = (theme) => {if ((navigator.userAgent).indexOf('Html5Plus') > -1) {if (theme == 'light') {plus.navigator.setStatusBarBackground('#ffffff');plus.navigator.setStatusBarStyle('dark'); // 只能是dark 和 light} else {plus.navigator.setStatusBarBackground('#121212');plus.navigator.setStatusBarStyle('light'); // 只能是dark 和 light}} else {let meta = document.querySelector('meta[name="theme-color"]');if (theme == 'light') {meta.setAttribute('content', '#fff');} else {meta.setAttribute('content', '#121212');}}
}export default {state: {theme: getStorage('theme') || 'light'},getters: {theme: state => state.theme},mutations: {SET_THEME: (state, theme) => {state.theme = themewindow.document.documentElement.setAttribute('data-theme', theme)changeTheme(theme)setStorage('theme', theme)},
}

使用

import { mapGetters, mapMutations } from "vuex";export default {data() {return {}},computed: {...mapGetters('theme')},methods: {...mapMutations('SET_THEME'),changeModel(type) {this.type = type;this.SET_THEME(type)},/* changeModel() {let type = ''if (this.theme == 'light') {type = 'dark'} else {type = 'light'}this.SET_THEME(type)}, */}
}