TailwindCSS & NextJS 如何实现深色模式外的自定义多色彩模式

方案1：插件自定义变体（推荐，零业务代码改造） #

这是成本最低的实现方式，完全对齐Tailwind原生深色模式的使用逻辑，不需要重构现有组件、不需要额外封装上下文组件，仅需修改Tailwind配置即可。

• 配置逻辑：Tailwind本身开放了变体注册的插件API，可以直接给自定义色彩模式注册和dark:完全一致的变体规则，匹配根节点/body上的模式类名。
  在tailwind.config.js中添加如下配置：

const plugin = require('tailwindcss/plugin')

module.exports = {
  darkMode: 'class', // 保留原有dark模式逻辑，完全不冲突
  plugins: [
    plugin(({ addVariant }) => {
      // 注册evening模式变体，匹配body挂载evening类的场景
      addVariant('evening', '&:where(.evening *)')
      // 注册midnight模式变体，匹配body挂载midnight类的场景
      addVariant('midnight', '&:where(.midnight *)')
    })
  ]
}

• 样式写法和原生dark模式完全一致，直接在类名中拼接对应前缀即可：

<div class="text-gray-900 dark:text-blue-500 evening:text-purple-400 midnight:text-indigo-100 bg-white dark:bg-gray-900 evening:bg-purple-950/30 midnight:bg-gray-950">
  多模式适配内容块
</div>

• 模式切换逻辑和原有dark模式完全复用，仅需操作body的类名即可：

// 切换到evening模式
document.body.classList.remove('dark', 'midnight')
document.body.classList.add('evening')

// 切换到midnight模式
document.body.classList.remove('dark', 'evening')
document.body.classList.add('midnight')

这个方案的优势：

• 无额外运行时开销，所有样式生成逻辑走Tailwind原生构建流程，不会产生冗余CSS
• 兼容所有Tailwind内置工具类、自定义工具类，不需要单独为每个模式写样式覆盖
• 变体优先级和原生dark变体对齐，不会出现样式覆盖错乱问题
• 现有dark模式相关代码完全不需要改动，平滑新增自定义模式

方案2：轻量全局工具封装（适合需要持久化/自动匹配的场景） #

如果需要实现用户选择持久化、按时段/系统偏好自动切换模式，不需要写高耦合的ColorModeContext适配组件，仅需封装一个几十行的全局工具即可：

• 应用初始化时从localStorage读取用户上次选择的模式，无记录则按规则自动匹配（比如18:00-22:00默认evening，22:00-次日6:00默认midnight，其余时间默认浅色模式）
• 封装全局setColorMode方法，统一处理body类名切换、本地存储更新逻辑，不需要在组件中重复写类名操作代码
• 所有样式仍然使用上述自定义变体编写，不需要做组件层面的硬编码适配

注意：不建议使用上下文包裹组件的方案做模式适配，这种方案会要求所有多模式样式依赖适配组件渲染，后续新增模式、调整样式的维护成本极高，本质是绕开了CSS本身的条件样式能力，属于冗余实现。

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