vue3 中 主题定制

vue3 中 主题定制

背景

做多主题定制,黑/白 ,里面还要再分各种颜色,每次进来都要记住上次的主题设置

效果图

一、目录结构

复制代码
├── generated
│   ├── theme  
│   │   └── dark-yellow.ts
│   │   └── dark-orange.ts
│   │   └── light-yellow.ts
│   │   └── light-orange.ts
│   │   └── theme.enums.ts
├── stores 
│   ├── theme-store.ts  

数据结构

主题

枚举

二、流程

  1. Init的时候,根据 store 中的颜色主题,先做一次匹配,changeTheme
  2. 切换主题的时候,监听绑定的值,做 changeTheme
  3. changeTheme 主要就是读取 文件列表,做匹配,做规则制定,最后使用 document.documentElement.style.setProperty 设置style,根据css 变量做匹配

三、核心实现

  1. init 时,设置已存储的theme
js 复制代码
import { setupTheme } from '@/stores/theme-store'
const app = createApp(App)
initApp(app)


const initApp = async (app: App) => {
  setupStore(app)
  setupRouter(app)
  setupLang(app)
  setupTheme()
  app.mount('#app')
}
  1. 读取配置主题文件(匹配到的文件默认是懒加载的,通过动态导入实现eager: true)
js 复制代码
const themeFileList: Record<string, string> = import.meta.glob(
  ['@/generated/theme/*.ts', '!@/generated/theme/theme.enums.ts'],
  {
    import: 'default',
    eager: true
  }
)
  1. 根据文件夹匹配出主题key
js 复制代码
const themeFileListObject = {}
for (const key in themeFileList) {
  const filename = key.split('/').pop()?.replace('.ts', '')
  if (filename) {
    themeFileListObject[filename] = themeFileList[key]
  }
}
  1. 替换root 样式(根据存储key匹配出当前色值表,format css name,then set style)
js 复制代码
const injectRootStyle = (theme: ThemeEnum) => {
  const themeObject = themeFileListObject[theme]
  for (const key in themeObject) {
    const cssVariableName = `--${key.replace(/_/g, '-').toLowerCase()}`
    document.documentElement.style.setProperty(cssVariableName, themeObject[key])
  }
}
  1. Pian 中做数据监听,data change to call changeTheme function.
js 复制代码
watch(theme, (nVal) => {
      changeTheme(nVal)
})
// 改变主题
const changeTheme = (theme: ThemeEnum) => {
  injectRootStyle(theme)
}
//设置主题
const setupTheme = () => {
  changeTheme(useThemeStore().theme)
}

四、总体代码

js 复制代码
import ThemeEnum from '@/generated/theme/theme-enum'
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'

// 读取全部主题配置
const themeFileList: Record<string, string> = import.meta.glob(
  ['@/generated/theme/*.ts', '!@/generated/theme/theme.enums.ts'],
  {
    import: 'default',
    eager: true
  }
)

// 根据读取的文件路径,生成名称和地址
const themeFileListObject = {}
for (const key in themeFileList) {
  const filename = key.split('/').pop()?.replace('.ts', '')
  if (filename) {
    themeFileListObject[filename] = themeFileList[key]
  }
}

// 注入根样式
const injectRootStyle = (theme: ThemeEnum) => {
  const themeObject = themeFileListObject[theme]
  for (const key in themeObject) {
    const cssVariableName = `--${key.replace(/_/g, '-').toLowerCase()}`
    document.documentElement.style.setProperty(cssVariableName, themeObject[key])
  }
}

// 定义一个函数,用于改变主题
const changeTheme = (theme: ThemeEnum) => {
  // 注入根样式
  injectRootStyle(theme)
}

// 定义一个函数,用于设置主题
const setupTheme = () => {
  // 改变主题
  changeTheme(useThemeStore().theme)
}

const useThemeStore = defineStore(
  'theme',
  () => {
    const theme = ref(ThemeEnum['light-red'])

    watch(theme, (nVal) => {
      changeTheme(nVal)
    })

    return { theme }
  },
  { persist: true }
)

export { setupTheme, changeTheme, useThemeStore }

五、总结

  1. 我们在切换主题的时候,在组件内其实没有做任何处理,是在pinia 里做的监听
  2. 持久化 这里用到了 persist 插件
  3. 通过向外暴露setupTheme 来实现 修改主题
相关推荐
遂心_6 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒6 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
王同学QaQ6 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
岛风风6 小时前
关于手机的设备信息
前端
ReturnTrue8686 小时前
nginx性能优化之Gzip
前端
华仔啊6 小时前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
程序员鱼皮7 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
w_y_fan7 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇7 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort7 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript