自定义变更主题

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

上文记录了element-plus主题如何变更，除了element-plus部分主题的变换，项目中其他部分也需要变换主题，本文便是记录自定义主题变更的实现

本文处理的是下图菜单栏部分的主题变换

首先菜单栏部分背景色不能写死

<!-- 左侧 menu -->
<sidebar
  :style="{ backgroundColor: $store.getters.cssVar.menuBg }"
/>

下面是store.getters

import variables from '@/styles/variables.module.scss'
import { generateColors } from '@/utils/theme'
import { getItem } from '@/utils/storage'
import { MAIN_COLOR } from '@/constant'

// 快捷访问
const getters = {
  cssVar: (state) => variables,
}
export default getters

下面是sass样式

// variables.module.scss
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;

$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

$sideBarWidth: 210px;
$hideSideBarWidth: 54px;
$sidebarDuration: 0.28s;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

但是这样cssVar绑定的是variables，值已经写死了，需要修改

在element-plus主题色变更中，我们定义了generateColors方法，它的作用是根据主色获取色值表，将其引入到getter.js中

import { generateColors } from '@/utils/theme'
// 获取本地存储
import { getItem } from '@/utils/storage'
import variables from '@/styles/variables.module.scss'
import { MAIN_COLOR } from '@/constant'

// 快捷访问
const getters = {
  cssVar: (state) => ({
    ...variables,
    ...generateColors(getItem(MAIN_COLOR))
  }),
}
export default getters

但是主题变更之后，只有刷新页面才能展示新的主题色，因为getters中没有监测到依赖值的变化，所以我们应该修改依赖值

在更换主题色时，将新的主题色赋值给variables中的menuBg，这样getters便能监测到variables的变化

// store/modules/theme.js

import { getItem, setItem } from '@/utils/storage'
import { MAIN_COLOR, DEFAULT_COLOR } from '@/constant'
import variables from '@/styles/variables.module.scss'
export default {
  namespaced: true,
  state: () => ({
    ···
    variables: variables
  }),
  mutations: {
    /**
     * 设置主题色
     */
    setMainColor(state, newColor) {
      ···
      state.variables.menuBg = newColor
      ···
    }
  }
}

getter.js

const getters = {
  ···
  cssVar: (state) => ({
    ...state.theme.variables,
    ...generateColors(getItem(MAIN_COLOR))
  }),
  ···
}

这样在修改主色后，菜单栏会同步变换主色

刷新页面后，generateColors(getItem(MAIN_COLOR))会根据新的主色生成色值表，覆盖variables中的颜色，显示出最后一次更换后的主色