Angular12中动态修改Less变量实现深色主题的问题求助

你当前的写法不符合Less的Map键名插值规则，Less不支持直接在@colors[]的键位直接拼接插值变量，必须先把完整键名拼接为独立变量后再取值。

修复静态Less代码 #

修改后的代码可以正常编译拿到预期色值：

@theme: dark;

@colors: {
  primary-violet-light: #608cef;
  primary-violet-dark: #031d58;
}

// 先拼接完整的键名变量
@colorKey: "primary-violet-@{theme}";
// 从Map中取值
@primary-violet: @colors[@colorKey]; 

Less属于预编译语言，所有变量会在构建阶段被替换为固定值，运行时无法直接修改Less变量实现主题切换，推荐使用CSS自定义属性（CSS变量）的方案实现需求，可与现有Less代码无缝兼容：

步骤1：全局定义主题变量 #

在项目全局样式文件styles.less中定义两套主题的变量：

// 亮色主题
:root.light-theme {
  --primary-violet: #608cef;
  // 其余亮色主题变量统一在这里添加
}

// 深色主题
:root.dark-theme {
  --primary-violet: #031d58;
  // 其余深色主题变量统一在这里添加
}

步骤2：业务代码使用变量 #

所有需要适配主题的样式直接调用CSS变量即可：

// 任意组件的Less样式中直接使用
.page-title {
  color: var(--primary-violet);
}

步骤3：实现Angular主题切换逻辑 #

可以封装为公共主题服务，或者直接在根组件实现切换逻辑：

// 切换主题方法
switchTheme(theme: 'light-theme' | 'dark-theme') {
  const root = document.documentElement;
  // 移除原有主题类
  root.classList.remove('light-theme', 'dark-theme');
  // 添加新主题类
  root.classList.add(theme);
  // 持久化用户主题选择，刷新页面不丢失
  localStorage.setItem('selected-theme', theme);
}

// 页面初始化时加载主题
ngOnInit() {
  // 优先读取用户保存的主题
  const savedTheme = localStorage.getItem('selected-theme') as 'light-theme' | 'dark-theme' | null;
  if (savedTheme) {
    this.switchTheme(savedTheme);
    return;
  }
  // 没有保存的主题则跟随系统偏好
  const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  this.switchTheme(isSystemDark ? 'dark-theme' : 'light-theme');
}

该方案无需引入第三方依赖，切换主题无延迟，完全适配Angular 12版本。

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