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)
        }, */
    }
}
相关推荐
前端 贾公子4 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐5 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万8 分钟前
一次紧急的现场性能问题排查
前端·性能优化
excel24 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手24 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360227 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep27 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo29 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒1 小时前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用1 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端