1.main.ts 引入 ElementPlus 暗黑主题样式、初始化自定义主题监听器

// 暗黑主题样式
import 'element-plus/theme-chalk/dark/css-vars.css'
import themeStyle from '@/common/themeStyle'

// 初始化主题监听器
themeStyle.initThemeWatcher();

2.绑定主题切换按钮

<el-switch 
    v-model="darkFlag" 
    :active-action-icon="Moon" 
    :inactive-action-icon="Sunny" 
    inline-prompt 
    @change="toggleDark" />

3.JS中动态设置样式

3.1 暗色主题图表中的字体没有跟随主题切换

3.2 定义全局样式文件 style.less

// 定义全局样式
:root {
  // 字体颜色
  --text-color: white;         // 设置时，使用
  --text-color-white: white;   // 获取时，使用
  --text-color-black: black;   // 获取时，使用

  // 列表激活的背景色
  --list-color-active: rgb(238, 238, 238);  // 设置时，使用
}

3.3 main.ts 引入 style.less

// 导入公共样式
import '@/common/style.less'

3.4 定义全局主题样式设置和获取的 themeStyle.ts

import { useDark } from '@vueuse/core';
import { useCssVar } from '@vueuse/core';
import { watch } from 'vue';

// 使用 useDark 钩子来检测当前是否处于暗黑模式。黑暗模式返回true，否则返回false
let darkFlag = useDark();

// 设置全局样式
export default{
  DARK_FLAG: darkFlag,

  // 动态获取对应主题下的全局变量值
  getThemeStyle(
    darkVariable: string,  // 暗色模式下的全局变量名
    lightVariable: string  /// 亮色模式下的全局变量名
  ) {
    // 使用 useCssVar 获取全局变量值
    const darkVar = useCssVar(darkVariable, document.documentElement);
    const lightVar = useCssVar(lightVariable, document.documentElement);
    
    return darkFlag.value ? darkVar.value : lightVar.value;
  },
  
  // 动态设置全局变量，对应的暗色主题和亮色主题下的值
  setThemeStyle(
    variable: string,     // CSS 变量名
    darkValue: string,    // 暗色模式 CSS 值（可以使颜色值）
    lightValue: string,   // 亮色模式 CSS 值（可以使颜色值）
  ) {
    // 创建响应式的 CSS 变量引用
    const cssVar = useCssVar(variable, document.documentElement);
    // 设置 CSS 值
    if(darkFlag.value){
      cssVar.value = darkValue;  // 暗色模式
    } else {
      cssVar.value = lightValue; // 亮色模式
    }
  },

  // 初始化主题监听器
  initThemeWatcher() {
    // 监听暗色主题变化，自动切换对应样式
    watch(darkFlag, () => {
      this.setThemeStyle('--list-color-active', 'red', 'green');
    }, { immediate: true });
  }

}

3.5 使用 watch 监听主题变化，从而改变图表中的字体样式（以月销量图表为例）

3.5.1 导入 themeStyle.ts

  import themeStyle from '@/common/themeStyle'

3.5.2 设置图表配置项，动态设置颜色

3.5.3 使用 watch 监听 themeStyle.DARK_FLAG.value 变化，更新 ECharts 的配置

3.6 主题切换，图表字体样式也切换

4.CSS中动态设置样式

4.1 样式绑定全局变量

4.2 themeStyle.ts 监听 --list-color-active 全局变量

// 初始化主题监听器
  initThemeWatcher() {
    // 监听暗色主题变化，自动切换对应样式
    watch(darkFlag, () => {
      // 设置 --list-color-active 暗色主题下为红色，亮色主题下为绿色
      this.setThemeStyle('--list-color-active', 'red', 'green');
    }, { immediate: true });  // immediate: true 表示组件初始化触发一次
  }

4.3 主题切换，选中高亮颜色设置成功