Next.js 主题配色实现：如何为元素设置带颜色选择的主题？

你用CSS变量结合修改类名/属性的思路是完全可行的，这也是当前前端主题切换的主流实现方案之一。下面给你梳理更完善的落地步骤：

一、规范CSS变量定义 #

建议把所有主题相关变量统一管理，用data-theme属性比类名更具语义化，当然用类名也完全没问题，看个人习惯：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 默认主题变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #45adfe;
}

/* 预设主题变量 */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #ffffff;
  --primary-color: #63b3ed;
}

[data-theme="green"] {
  --bg-color: #f0fff4;
  --text-color: #22543d;
  --primary-color: #2f855a;
}

[data-theme="red"] {
  --bg-color: #fff5f5;
  --text-color: #742a2a;
  --primary-color: #c53030;
}

二、在元素中引用变量 #

可以直接在HTML元素中使用，也可以自定义Tailwind工具类方便全局调用：

@layer utilities {
  .bg-theme {
    background-color: var(--bg-color);
  }
  .text-theme {
    color: var(--text-color);
  }
  .primary-theme {
    color: var(--primary-color);
  }
}

HTML示例：

<body class="bg-theme text-theme min-h-screen">
  <h1 class="primary-theme">主题切换测试</h1>
  <!-- 主题选择按钮 -->
  <div class="flex gap-2 p-4">
    <button onclick="setTheme('light')">浅色</button>
    <button onclick="setTheme('dark')">深色</button>
    <button onclick="setTheme('green')">绿色</button>
    <button onclick="setTheme('red')">红色</button>
  </div>
  <!-- 自定义颜色选择器 -->
  <div class="p-4">
    <label>背景色：<input type="color" id="bgPicker" onchange="customizeVar('bg-color', this.value)"></label>
    <label>文字色：<input type="color" id="textPicker" onchange="customizeVar('text-color', this.value)"></label>
  </div>
</body>

三、实现主题切换逻辑 #

用JavaScript修改属性或直接更新CSS变量，同时可以把用户选择的主题存入本地存储，下次打开页面自动恢复：

// 切换预设主题
function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('selected-theme', theme);
}

// 自定义主题变量
function customizeVar(variable, value) {
  document.documentElement.style.setProperty(`--${variable}`, value);
  // 保存自定义配置到本地
  const customTheme = JSON.parse(localStorage.getItem('custom-theme') || '{}');
  customTheme[variable] = value;
  localStorage.setItem('custom-theme', JSON.stringify(customTheme));
}

// 页面加载时恢复主题
window.addEventListener('DOMContentLoaded', () => {
  // 优先恢复自定义主题
  const customTheme = JSON.parse(localStorage.getItem('custom-theme') || '{}');
  Object.keys(customTheme).forEach(key => {
    document.documentElement.style.setProperty(`--${key}`, customTheme[key]);
  });
  // 没有自定义的话用预设主题
  const savedTheme = localStorage.getItem('selected-theme') || 'light';
  if (!Object.keys(customTheme).length) {
    setTheme(savedTheme);
  }
});

这样既支持预设主题的一键切换，也能实现自定义颜色选择的功能，完全匹配你想要的效果。

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