如何在CSS中同时启用两个独立主题分别控制背景与文字颜色？

问题描述 #

用户需要实现以下功能：

• 提供4个主题选项，分为两组：背景主题（light/dark）、文字主题（Blue/Green）
• 用户需从两组中各选一个主题，点击“apply”按钮后，目标div的背景色和文字色同时应用所选主题
• 原代码每次仅能生效一个主题，无法实现双主题同时生效的需求

解决方案 #

核心问题在于原代码中每次调用setTheme都会覆盖根元素（:root）的className，导致后设置的主题会覆盖前一个。解决思路是将两个主题类名拼接后一次性设置给根元素的className，这样两个类会同时生效，CSS中对应的变量会各自作用于背景和文字样式。

同时可以优化按钮的选中状态，添加.active类来标记用户当前选择的主题按钮，提升交互体验。

修改后的完整代码 #

HTML #

<div>
  <div id="choose"></div>

  <div class="toggle-container">
    <button data-type="bg" onclick="selectTheme('bg', 'light');showChosen()" title="Light mode">light</button>
    <button data-type="bg" onclick="selectTheme('bg', 'dark');showChosen()" title="Dark mode">dark</button>
    <br/>
    <button data-type="text" onclick="selectTheme('text', 'Blue');showChosen()" title="Blue">Blue</button>
    <button data-type="text" onclick="selectTheme('text', 'Green');showChosen()" title="Green">Green</button>
  </div>
  
  <div class="div1" style="height:100px;width:100px"> div </div>
</div>

CSS #

:root,
:root.light {
  --bg-color: #fff;
}
:root.dark {
  --bg-color: #121212;
}

/* 按钮选中状态样式 */
.toggle-container button.active {
  border: 1px solid red;
  background-color: #f0f0f0;
}

:root,
:root.Blue {
  --text-color: blue;
}
:root.Green {
  --text-color: green;
}

.div1,.div2 {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid #ccc; /* 加边框方便观察效果 */
}

JavaScript #

let bgTheme = "";
let textTheme = "";

// 选择主题时更新按钮选中状态
function selectTheme(type, theme) {
  // 移除同类型按钮的active类
  document.querySelectorAll(`button[data-type="${type}"]`).forEach(btn => {
    btn.classList.remove("active");
  });
  // 给当前点击的按钮添加active类
  event.target.classList.add("active");
  
  // 更新对应主题变量
  if (type === "bg") {
    bgTheme = theme;
  } else if (type === "text") {
    textTheme = theme;
  }
}

// 应用选中的双主题
function saveTheme() {
  // 拼接两个主题类名，过滤空值避免多余空格
  const combinedThemes = [bgTheme, textTheme].filter(Boolean).join(" ");
  document.documentElement.className = combinedThemes;
}

// 显示当前选择的主题和应用按钮
function showChosen() {
  const str = `background should be: ${bgTheme || "未选择"} ;;; text should be: ${textTheme || "未选择"} 
  <button onclick="saveTheme()" title="Apply themes"> apply</button>`;
  document.getElementById("choose").innerHTML = str;
}

关键修改说明 #

• 将原模糊的theme1/theme2拆分为bgTheme/textTheme，语义更清晰
• 添加selectTheme函数管理按钮选中状态，避免用户混淆当前选择
• saveTheme函数中通过拼接类名一次性设置，确保两个主题同时生效
• 过滤空值，避免未选择某组主题时出现无效空格

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