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)
        }, */
    }
}
相关推荐
工一木子25 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron