CSS_scss切换主题

目录assets/theme以下新建文件

_handle.scss

css 复制代码

@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

css 复制代码

$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

css 复制代码

@import './_handle.scss';

.mainBackground {
    @include themify() {
        background: themed("main_background") !important;
    }
}

.textColor {
    @include themify() {
        color: themed("text_color") !important;
    }
}

修改vue.config.js文件

js 复制代码

const scss_path = `@/assets/theme/index.scss`

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

app.vue设置默认主题

js 复制代码

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

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

js 复制代码

// 获取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 = theme
		window.document.documentElement.setAttribute('data-theme', theme)
		changeTheme(theme)
		setStorage('theme', theme)
    },
}

使用

js 复制代码

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)
        }, */
    }
}