Vue+SCSS项目中点击切换色盲友好主题色的实现方案咨询

核心思路 #

SCSS变量是编译时确定的，编译成CSS后就没法在运行时修改，所以你之前用jQuery直接改$primary的路子走不通。正确做法是用**CSS自定义属性（CSS变量）**替代SCSS变量做运行时动态切换，再结合Vue的响应式管理主题配置。

步骤1：改造SCSS，映射到CSS变量 #

把原有SCSS变量转成:root下的CSS自定义属性，让所有样式都能引用这些动态变量：

// Theme colors
$theme-green: #c4d600;
$theme-blue: #1a397c;
$theme-red:#9b1717;

// 色盲适配配色（可根据需求调整具体色值）
$theme-deuteranopia-primary: #1a397c; // 红绿色盲主色
$theme-deuteranopia-secondary: #9b1717;
$theme-tritanopia-primary: #c4d600; // 蓝黄色盲主色（示例值，按需修改）
$theme-tritanopia-secondary: #1a397c;

// 定义CSS变量，默认用正常主题
:root {
  --primary: #{$theme-green};
  --secondary: #{$theme-red};
  --success: #288515;
  --danger: #a61616;
  --warning: #efa92c;
}

// 修改$theme-colors，用CSS变量替代SCSS变量
$theme-colors: (
    "primary": var(--primary),
    "secondary": var(--secondary),
    "success": var(--success),
    "danger": var(--danger),
    "warning": var(--warning),
);

// 所有原来用$primary的地方，统一换成var(--primary)
// 示例：.btn-primary { background-color: var(--primary); }

步骤2：Vue中实现主题切换逻辑 #

在Vue组件里管理主题配置，通过点击按钮修改CSS变量：

1. 组件数据与方法

<script>
export default {
  data() {
    return {
      currentTheme: 'normal',
      // 主题配色表，对应三种模式
      colorThemes: {
        normal: {
          primary: '#c4d600',
          secondary: '#9b1717',
          success: '#288515',
          danger: '#a61616'
        },
        deuteranopia: { // 红绿色盲
          primary: '#1a397c',
          secondary: '#9b1717',
          success: '#1a397c',
          danger: '#9b1717'
        },
        tritanopia: { // 蓝黄色盲
          primary: '#c4d600',
          secondary: '#1a397c',
          success: '#c4d600',
          danger: '#1a397c'
        }
      }
    }
  },
  methods: {
    // 切换主题方法
    switchTheme(themeKey) {
      this.currentTheme = themeKey;
      const theme = this.colorThemes[themeKey];
      // 修改根元素的CSS变量
      const root = document.documentElement;
      root.style.setProperty('--primary', theme.primary);
      root.style.setProperty('--secondary', theme.secondary);
      root.style.setProperty('--success', theme.success);
      root.style.setProperty('--danger', theme.danger);
    }
  }
}
</script>

2. 模板中的切换按钮（下拉框圆形按钮）

<template>
  <div class="theme-switcher">
    <!-- 正常模式 -->
    <button 
      class="theme-btn" 
      :class="{ active: currentTheme === 'normal' }"
      @click="switchTheme('normal')"
      style="background-color: #c4d600;"
    ></button>
    <!-- 红绿色盲模式 -->
    <button 
      class="theme-btn" 
      :class="{ active: currentTheme === 'deuteranopia' }"
      @click="switchTheme('deuteranopia')"
      style="background-color: #1a397c;"
    ></button>
    <!-- 蓝黄色盲模式 -->
    <button 
      class="theme-btn" 
      :class="{ active: currentTheme === 'tritanopia' }"
      @click="switchTheme('tritanopia')"
      style="background-color: #c4d600;"
    ></button>
  </div>
</template>

<style scoped>
.theme-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
  margin: 0 8px;
}
.theme-btn.active {
  border-color: #000;
}
</style>

额外优化建议 #

1. 色盲配色调整：可以参考色盲友好配色标准，优化colorThemes里的色值，比如红绿色盲避免红绿搭配，蓝黄色盲避免蓝黄搭配。
2. 主题持久化：如果需要刷新页面后保留用户选择，可把currentTheme存在localStorage里：

   mounted() {
     const savedTheme = localStorage.getItem('colorTheme');
     if (savedTheme) this.switchTheme(savedTheme);
   },
   watch: {
     currentTheme(newVal) {
       localStorage.setItem('colorTheme', newVal);
     }
   }
   

3. 弃用sass.js：你引入的sass.js是浏览器端编译SCSS的工具，完全没必要用，用CSS变量是更轻量的解决方案。

内容的提问来源于stack exchange，提问作者SlayerCat