Vue3+vite实现黑暗模式/暗夜模式/主题换肤

包版本：

vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],css: {preprocessorOptions: {less: {modifyVars: {hack: `true; @import (reference) "${resolve('src/theme/style.less')}";`,},javascriptEnabled: true}}},
})

/src/theme/style.less

// 默认的主题颜色
@primaryColor: var(--primaryColor, #000);
@primaryTextColor: var(--primaryTextColor, green);
// 导出变量
:export {name: "less";primaryColor: @primaryColor;primaryTextColor: @primaryTextColor;
}

/src/theme/model.js

export const themes = {default: {primaryColor: `${74}, ${144},${226}`,primaryTextColor: `${74}, ${144},${226}`,},dark: {primaryColor: `${0},${0},${0}`,primaryTextColor: `${0},${0},${0}`,},
};

/src/theme/theme.js

import { themes } from "./model";
// 修改页面中的样式变量值
const changeStyle = (obj) => {for (let key in obj) {document.getElementsByTagName("body")[0].style.setProperty(`--${key}`, obj[key]);}
};
// 改变主题的方法
export const setTheme = (themeName) => {localStorage.setItem("theme", themeName); // 保存主题到本地，下次进入使用该主题const themeConfig = themes[themeName];// 如果有主题名称，那么则采用我们定义的主题if (themeConfig) {localStorage.setItem("primaryColor", themeConfig.primaryColor); // 保存主题色到本地localStorage.setItem("primaryTextColor", themeConfig.primaryTextColor); // 保存文字颜色到本地changeStyle(themeConfig); // 改变样式} else {let themeConfig = {primaryColor: localStorage.getItem("primaryColor"),primaryTextColor: localStorage.getItem("primaryTextColor"),};changeStyle(themeConfig);}
};

组件中css使用：

background: rgba(@primaryColor, 1);
color: @primaryTextColor;

JS切换主题：

import { setTheme } from "../theme/theme";
//调用切换方法
setTheme("default");
// 更改为自定义主题
custom() {let newColor = {r: 12,g: 33,b: 234,};let newPrimaryColor = `${newColor.r},${newColor.g},${newColor.b}`;localStorage.setItem("primaryColor", newPrimaryColor); // 将新的主题色存入本地setTheme();
},

参考:

https://zhuanlan.zhihu.com/p/440387917

https://blog.csdn.net/LiuJia20010827/article/details/127235713

https://blog.csdn.net/V_AYA_V/article/details/117783527

Vue3+vite实现黑暗模式/暗夜模式/主题换肤相关推荐

Android 主题换肤的开源库
Android 主题换肤的开源库(插件化换肤) 新增夜间模式的简洁实现方式,不需要再去单独创建一个皮肤包(目前处于beta版本) 夜间模式实现方式前提条件还是每个使用到的资源必须是引用的,不能是具体 ...
android view设置按钮颜色_Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android主题换肤实现
本系列文章主要是对一个Material Design的APP的深度解析,主要包括以下内容基于Material Design Support Library作为项目整体框架.对应博文:Android ...
Element UI主题换肤功能(基于vue-element-admin框架)
环境信息: 日期:2022-08-05 node版本:v14.15.4 "sass": "1.26.8", "sass-loader": & ...
Android 主题换肤技术方案分析
写在前面 Android TV 电视开发,主题换肤,我感觉有两种层级的方式,一种是系统级,另一种是应用级, 我记得很早在 Linux 桌面开发的时候,我们之前的公司在GTK+上也实现了一套换肤UI ...
Android主题换肤无缝切换
作者 _SOLID 关注 2016.04.17 22:04* 字数 4291 阅读 23224评论 123喜欢 679 今天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需 ...
Android主题换肤无缝切换你值得拥有
链接:https://www.jianshu.com/p/af7c0585dd5b 天再给大家带来一篇干货. Android的主题换肤 ,可插件化提供皮肤包,无需Activity的重启直接实现无缝切换 ...
基于element-ui的主题换肤
今天分享的是基于element-ui的主题换肤功能需求效果如动图: 需求描述:根据客户的个人喜好,切换不同颜色风格的主题. 关键点1:在element-ui官方去配置主题颜色并且下载对应的文件,一 ...
反思|开启B站少女心模式，探究APP换肤机制的设计与实现
反思系列博客是我的一种新学习方式的尝试,该系列起源和目录请参考这里 . 概述换肤功能并非奇技淫巧,而是已非常普及,尤其当Android Q推出了深色模式之后,国内绝大多数主流应用都至少提供 ...
组件库自定义主题换肤实现方案
概述 douluo-ui 组件库是基于 element-ui 实现的,那么实现换肤分两步:一是 element-ui 的换肤方案:二是 douluo-ui组件库的换肤方案 element-ui 的 ...

Vue3+vite实现黑暗模式/暗夜模式/主题换肤

Vue3+vite实现黑暗模式/暗夜模式/主题换肤相关推荐

最新文章

热门文章