theme 主题系统

多色彩方案主题管理，支持亮色/暗色模式和 6 种预设配色

@mono/theme

多色彩方案主题管理系统，基于 shadcn/ui CSS 变量体系。支持亮色/暗色模式切换和 6 种预设配色方案，适配 next-themes。

特性

6 种精选配色方案（Default、Claude、Cosmic Night、Modern Minimal、Ocean Breeze、Perplexity）
亮色/暗色双模式
localStorage 持久化
FOUC 防闪脚本
零依赖，纯 TypeScript
shadcn/ui 兼容的 CSS 变量

快速开始

安装

// package.json
{
  "dependencies": {
    "@mono/theme": "workspace:*"
  }
}

基本使用

import {
  initializeTheme,
  applyTheme,
  saveTheme,
  getThemeScript,
} from "@mono/theme";

// 在 <head> 中初始化主题（防止闪烁）
const state = initializeTheme("light", "default");

// 切换暗色模式
applyTheme("dark", state.colorScheme);
saveTheme({ mode: "dark", colorScheme: state.colorScheme });

// 切换配色方案
applyTheme("dark", "claude");
saveTheme({ mode: "dark", colorScheme: "claude" });

防止 FOUC（Flash of Unstyled Content）

在 Next.js 的 layout.tsx 中添加内联脚本：

import { getThemeScript } from "@mono/theme";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <script
          dangerouslySetInnerHTML={{ __html: getThemeScript() }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

可用配色方案

方案	主色调	类名
Default	`#343434` (灰色)	无
Claude	`#b45309` (暖橙)	`theme-claude`
Cosmic Night	`#7c3aed` (深紫)	`theme-cosmic-night`
Modern Minimal	`#6366f1` (靛蓝)	`theme-modern-minimal`
Ocean Breeze	`#10b981` (青绿)	`theme-ocean-breeze`
Perplexity	`#0d9488` (青蓝)	`theme-perplexity`

引入 CSS 主题文件

每个配色方案有独立的 CSS 文件，包含完整的 shadcn/ui CSS 变量（oklch 色彩空间）：

/* 在全局样式中引入需要的主题 */
@import "@mono/theme/themes/default.css";
@import "@mono/theme/themes/claude.css";
@import "@mono/theme/themes/cosmic-night.css";
@import "@mono/theme/themes/modern-minimal.css";
@import "@mono/theme/themes/ocean-breeze.css";
@import "@mono/theme/themes/perplexity.css";

API 参考

`initializeTheme(defaultMode?, defaultColorScheme?, storageKey?)`

初始化主题，读取 localStorage 并应用。返回当前 ThemeState。

`applyTheme(mode, colorScheme)`

将主题类应用到 document.documentElement。

`saveTheme(state, storageKey?)`

将主题状态保存到 localStorage。

`getStoredTheme(storageKey?)`

从 localStorage 读取已保存的主题状态。

`getThemeScript(storageKey?, defaultMode?, defaultColorScheme?)`

生成用于内联 <script> 的 JavaScript 代码，防止页面加载时的主题闪烁。

`isValidMode(value)` / `isValidColorScheme(value)`

类型守卫函数，用于验证输入值。

类型

type ThemeMode = "light" | "dark";
type ColorScheme = "default" | "claude" | "cosmic-night"
  | "modern-minimal" | "ocean-breeze" | "perplexity";
interface ThemeState { mode: ThemeMode; colorScheme: ColorScheme; }

theme 主题系统

On this page