MuseMVP

配置 MuseMVP 当前主题体系中的 light/dark/system 模式、变量 token 与主题切换行为。

本文聚焦 MuseMVP 当前版本的主题实现：模式切换（light / dark / system）+ CSS 变量定制。

能力概览

能力	当前实现
可用主题模式	`config.ui.enabledThemes` 控制
默认主题模式	`config.ui.defaultTheme` 控制
全局主题 Provider	`next-themes`，挂载于 `src/modules/html-document/Document.tsx`
变量来源	`src/app/globals.css` 与 `src/app/styles/theme.css`
前端切换器	应用布局中使用 `ColorThemeSwitcherNoCustomTheme`

范围说明

当前体系是稳定的“模式切换 + 变量 token”方案，不内置多品牌预设主题库。

快速配置

设置可用模式

在 src/config/index.ts 中调整 enabledThemes 与 defaultTheme。

// src/config/index.ts
ui: {
  enabledThemes: ["light", "dark", "system"],
  defaultTheme: "dark",
}

修改核心变量

在 src/app/globals.css 中维护基础变量与暗色变量。

/* src/app/globals.css */
:root {
  --background: oklch(...);
  --foreground: oklch(...);
  --primary: oklch(...);
}

.dark {
  --background: oklch(...);
  --foreground: oklch(...);
  --primary: oklch(...);
}