动态修改主题 #

declare module 'css-color-function' {
  export function convert(color: string): string;
}

export interface ScssVariables {
  menuText: string;
  menuActiveText: string;
  subMenuActiveText: string;
  menuBg: string;
  menuHover: string;
  subMenuBg: string;
  subMenuHover: string;
  sideBarWidth: string;
  theme: string;
  settingPanelWidth: string;
}

export const variables: ScssVariables

export default variables

import { App } from 'vue'
import {
  locale,
  ElButton,
  ElMessage,
  ElNotification,
  ElMessageBox,
  ElMenu,
  ElMenuItem,
  ElSubmenu,
  ElRow,
  ElCol,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElTooltip,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElScrollbar,
  ElDrawer,
  ElColorPicker
} from 'element-plus'
// 默认主题
import 'element-plus/lib/theme-chalk/index.css'

// Element Plus 组件内部默认使用英语
// https://element-plus.gitee.io/#/zh-CN/component/i18n
import lang from 'element-plus/lib/locale/lang/zh-cn'
// Element Plus 直接使用了 Day.js 项目的时间日期国际化设置, 并且会自动全局设置已经导入的 Day.js 国际化配置。
import 'dayjs/locale/zh-cn'

// $ELEMENT size属性类型
export type Size = 'default' | 'medium' | 'small' | 'mini'

interface ElementOptions {
  size: Size
}

export default (app: App, options: ElementOptions): void => {
  locale(lang)

  // 按需导入组件列表
  const components = [
    ElButton,
    ElMessage,
    ElNotification,
    ElMessageBox,
    ElMenu,
    ElMenuItem,
    ElSubmenu,
    ElRow,
    ElCol,
    ElBreadcrumb,
    ElBreadcrumbItem,
    ElTooltip,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElScrollbar,
    ElDrawer,
    ElColorPicker
  ]

  components.forEach(component => {
    app.component(component.name, component)
  })

  // Vue.prototype 替换为 config.globalProperties
  // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  app.config.globalProperties.$message = ElMessage
  app.config.globalProperties.$notify = ElNotification
  app.config.globalProperties.$confirm = ElMessageBox.confirm
  app.config.globalProperties.$alert = ElMessageBox.alert
  app.config.globalProperties.$prompt = ElMessageBox.prompt

  // 全局配置 https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  app.config.globalProperties.$ELEMENT = {
    size: options.size
  }
}

import { MutationTree, ActionTree } from 'vuex'
import variables from '@/styles/variables.scss'
import { IRootState } from '@/store'

export interface ISettingsState {
  theme: string;
  originalStyle: string;
}

// 定义state
const state: ISettingsState = {
  theme: variables.theme,
  originalStyle: '' // 保存element 主题样式文件内容 作为替换模板
}

// 动态key的情况下 根据不同的key 约束对应value
// http://www.voidcn.com/article/p-wtmkdcie-byz.html
type ValueOf<T> = T[keyof T];
interface ISettings { // 约束payload类型
  key: keyof ISettingsState; // 约束为ISettingsState中key
  value: ValueOf<ISettingsState>; // 约束为ISettingsState中value的类型
}
// 定义mutations 通用muation
const mutations: MutationTree<ISettingsState> = {
  CHANGE_SETTING(state, { key, value }: ISettings) {
    if (key in state) {
      (state[key] as ValueOf<ISettingsState>) = value
    }
  }
}

const actions: ActionTree<ISettingsState, IRootState> = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

import { InjectionKey } from 'vue'
import { createStore, Store, useStore as baseUseStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import app, { IAppState } from '@/store/modules/app'
import tagsView, { ITagsViewState } from '@/store/modules/tagsView'
import settings, { ISettingsState } from '@/store/modules/settings'
import getters from './getters'

// 模块声明在根状态下
export interface IRootState {
  app: IAppState;
  tagsView: ITagsViewState;
  settings: ISettingsState;
}

// 通过下面方式使用 TypeScript 定义 store 能正确地为 store 提供类型声明。
// https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage
// eslint-disable-next-line symbol-description
export const key: InjectionKey<Store<IRootState>> = Symbol()

// 对于getters在组件使用时没有类型提示
// 有人提交了pr #1896 为getters创建泛型 应该还未发布
// https://github.com/vuejs/vuex/pull/1896
// 代码pr内容详情
// https://github.com/vuejs/vuex/pull/1896/files#diff-093ad82a25aee498b11febf1cdcb6546e4d223ffcb49ed69cc275ac27ce0ccce

// vuex store持久化 默认使用localstorage持久化
const persisteAppState = createPersistedState({
  storage: window.sessionStorage, // 指定storage 也可自定义
  key: 'vuex_app', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  // paths: ['app'] // 针对app这个模块持久化
  // 只针对app模块下sidebar.opened状态持久化
  paths: ['app.sidebar.opened', 'app.size'] // 通过点连接符指定state路径
})

const persisteSettingsState = createPersistedState({
  storage: window.sessionStorage, // 指定storage 也可自定义
  key: 'vuex_setting', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  // paths: ['app'] // 针对app这个模块持久化
  // 只针对app模块下sidebar.opened状态持久化
  paths: ['settings.theme', 'settings.originalStyle'] // 通过点连接符指定state路径
})

export default createStore<IRootState>({
  plugins: [
    persisteAppState,
    persisteSettingsState
  ],
  getters,
  modules: {
    app,
    tagsView,
    settings
  }
})

// 定义自己的 `useStore` 组合式函数
// https://next.vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function useStore () {
  return baseUseStore(key)
}

// vuex持久化 vuex-persistedstate文档说明
// https://www.npmjs.com/package/vuex-persistedstate

import { GetterTree } from 'vuex'
import { IRootState } from './index'

// 定义全局getters
const getters: GetterTree<IRootState, IRootState> = {
  sidebar: (state) => state.app.sidebar,
  size: state => state.app.size,
  themeColor: state => state.settings.theme
}

export default getters

import { computed } from 'vue'
import { useThemeFiles } from '@/hooks/useThemeFiles'
import { getStyleTemplate } from '@/utils/getStyleTemplate'
import { generateColors } from '@/utils/color'
import { writeNewStyle } from '@/utils/writeNewStyle'
import { useStore } from '@/store'

export const useGenerateTheme = () => {
  const store = useStore()
  // 从store获取中获取 theme主题色
  const defaultTheme = computed(() => store.state.settings.theme)
  // 获取element-ui 主题文件内容 通过axios获取的 作为变量替换模板
  const originalStyle = computed(() => store.state.settings.originalStyle)
  // 生成主题
  // 了解element ui 设计 https://juejin.cn/post/6844903960218697741
  const generateTheme = (color: string) => {
    const colors = Object.assign({
      primary: defaultTheme.value
    }, generateColors(color))
    // 写入新的css样式
    writeNewStyle(originalStyle.value, colors)
  }
  // 第一步 远程获取element-ui 主题文件作为模板 然后进行变量替换 替换成我们所选主题色
  const { getThemeChalkStyle } = useThemeFiles()
  // 如果主题模板不存在 就要发送请求获取
  if (!originalStyle.value) {
    // axios请求后去 主题模板
    getThemeChalkStyle().then(data => {
      // data是获取到主题文件的css内容
      // 生成样式模板 将里面css内容里默认主题颜色值 替换成变量标记 如 '#409eff' => 'primary',
      // 方便我们后续 把primary字符标记 换成我们的主题色
      const styleValue = getStyleTemplate(data as string)
      // 把模板保存到 store中缓存起来 不用每次重新获取
      store.dispatch('settings/changeSetting', { key: 'originalStyle', value: styleValue })
      // 根据主题色生成主题 插入到html中
      generateTheme(defaultTheme.value)
    })
  } else {
    generateTheme(defaultTheme.value)
  }
  return {
    generateTheme
  }
}

import { useFetch } from './useFetch'
import pkgJson from 'element-plus/package.json'

// 获取element-plus版本
const version = pkgJson.version

interface ReturnFn {
  getThemeChalkStyle: () => Promise<unknown>
}
export const useThemeFiles = ():ReturnFn => {
  const getThemeChalkStyle = async (): Promise<unknown> => {
    // 返回获取到的指定版本的element主题css内容
    // return await useFetch('//unpkg.com/element-plus@1.0.2-beta.33/lib/theme-chalk/index.css')
    return await useFetch(`//unpkg.com/element-plus@${version}/lib/theme-chalk/index.css`)
  }

  return {
    getThemeChalkStyle
  }
}

import axios from 'axios'

const useFetch = async (url: string): Promise<unknown> => {
  return await new Promise((resolve, reject) => {
    axios({
      url,
      method: 'get'
    }).then(res => {
      if (res.status === 200) {
        resolve(res.data)
      } else {
        reject(new Error(res.statusText))
      }
    }).catch(err => {
      reject(new Error(err.message))
    })
  })
}

export {
  useFetch
}

export interface IObject {
  [prop: string]: string
}

// element ui 关于以下颜色设计阅读资料
// https://juejin.cn/post/6844903960218697741
// 官方文档说明
// https://element-plus.gitee.io/#/zh-CN/component/custom-theme
// element-plus ui每套主题 共用到以下多种颜色 根据根据白色和主题色进行混合生成渐变色
// Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色
// $--color-primary: #409EFF !default;
// $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
// 根据样式内容生成样式模板
export const getStyleTemplate = (data: string): string => {
  // 这些是我们要把key也就是css内容中颜色值 替换成右边value作为变量标记 后续我们之关系右边value这些变量标记
  const colorMap: IObject = {
    '#3a8ee6': 'shade-1',
    '#409eff': 'primary',
    '#53a8ff': 'light-1',
    '#66b1ff': 'light-2',
    '#79bbff': 'light-3',
    '#8cc5ff': 'light-4',
    '#a0cfff': 'light-5',
    '#b3d8ff': 'light-6',
    '#c6e2ff': 'light-7',
    '#d9ecff': 'light-8',
    '#ecf5ff': 'light-9'
  }
  Object.keys(colorMap).forEach(key => {
    const value = colorMap[key]
    // 将key对应的颜色值 替换成 右边对应value primary list-1这些 后续生成主题 作为替换变量标记使用
    data = data.replace(new RegExp(key, 'ig'), value)
  })
  return data // 返回css字符串模板 之后主要靠它用我们所选的主题色 渐变色 把里面 变量标记替换掉生成主题css
}

  // 生成主题
  // element ui 设计 https://juejin.cn/post/6844903960218697741
  const generateTheme = (color: string) => {
    const colors = Object.assign({
      primary: defaultTheme.value
    }, generateColors(color))
    // 动态创建style标签挂载到html中 并写入新的css样式
    writeNewStyle(originalStyle.value, colors)
  }

import { computed } from 'vue'
import { useThemeFiles } from '@/hooks/useThemeFiles'
import { getStyleTemplate } from '@/utils/getStyleTemplate'
import { generateColors } from '@/utils/color'
import { writeNewStyle } from '@/utils/writeNewStyle'
import { useStore } from '@/store'

export const useGenerateTheme = () => {
  const store = useStore()
  const defaultTheme = computed(() => store.state.settings.theme)
  const originalStyle = computed(() => store.state.settings.originalStyle)
  // 生成主题
  // element ui 设计 https://juejin.cn/post/6844903960218697741
  const generateTheme = (color: string) => {
    const colors = Object.assign({
      primary: defaultTheme.value
    }, generateColors(color))
    // 写入新的css样式
    writeNewStyle(originalStyle.value, colors)
  }
  // 第一步 远程获取element-ui 主题文件作为模板 然后进行变量替换 替换成我们所选主题色
  const { getThemeChalkStyle } = useThemeFiles()
  if (!originalStyle.value) {
    getThemeChalkStyle().then(data => {
      // data是主题文件的css内容
      const styleValue = getStyleTemplate(data as string)
      store.dispatch('settings/changeSetting', { key: 'originalStyle', value: styleValue })
      generateTheme(defaultTheme.value)
    })
  } else {
    generateTheme(defaultTheme.value)
  }
  return {
    generateTheme
  }
}

import color from 'css-color-function'
import { formula, IObject } from './constants'

// 转换成不同色调的rgb颜色值
// https://www.w3cplus.com/css/the-power-of-rgba.html
export const generateColors = (primary: string): IObject => {
  const colors = {} as IObject
  Object.keys(formula).forEach(key => {
    // element ui 主题色 渐变色设计 https://juejin.cn/post/6844903960218697741
    // 根据主题色生成渐变色 将formula对象中字符primary 替换成我们所选的主题色
    const value = formula[key].replace(/primary/g, primary)
    colors[key] = color.convert(value) // 转换成rgba颜色值
  })
  return colors
}

// 主题色的渐变色设计 https://juejin.cn/post/6844903960218697741
// color-mod css颜色函数
// https://www.w3cplus.com/css4/color-mod.html
// export const formula: IObject = {
//   'shade-1': 'color(primary shade(10%))',
//   'light-1': 'color(primary tint(10%))',
//   'light-2': 'color(primary tint(20%))',
//   'light-3': 'color(primary tint(30%))',
//   'light-4': 'color(primary tint(40%))',
//   'light-5': 'color(primary tint(50%))',
//   'light-6': 'color(primary tint(60%))',
//   'light-7': 'color(primary tint(70%))',
//   'light-8': 'color(primary tint(80%))',
//   'light-9': 'color(primary tint(90%))'
// }

export interface IObject {
  [prop: string]: string;
}

// 主题色的渐变色设计 https://juejin.cn/post/6844903960218697741
// color-mod css颜色函数
// https://www.w3cplus.com/css4/color-mod.html
export const formula: IObject = {
  'shade-1': 'color(primary shade(10%))',
  'light-1': 'color(primary tint(10%))',
  'light-2': 'color(primary tint(20%))',
  'light-3': 'color(primary tint(30%))',
  'light-4': 'color(primary tint(40%))',
  'light-5': 'color(primary tint(50%))',
  'light-6': 'color(primary tint(60%))',
  'light-7': 'color(primary tint(70%))',
  'light-8': 'color(primary tint(80%))',
  'light-9': 'color(primary tint(90%))'
}

import { IObject } from './constants'

// 写入新的css样式
export const writeNewStyle = (originalStyle: string, colors: IObject): void => {
  Object.keys(colors).forEach(key => {
    // 根据模板将之前变量标记替换成颜色值
    const reg = new RegExp('(:|\\s+)' + key, 'g')
    originalStyle = originalStyle.replace(reg, '$1' + colors[key])
  })
  // 之前有插入过id名为chalk-theme-style style元素就直接重新里面内容 没有就动态创建style并加上id
  const chalkStyle = document.getElementById('chalk-theme-style')
  if (!chalkStyle) {
    const style = document.createElement('style')
    style.innerText = originalStyle
    style.id = 'chalk-theme-style'
    // 插入到head中
    document.head.appendChild(style)
  } else {
    (chalkStyle as HTMLElement).innerText = originalStyle
  }
}