iFluxArt Docs

Hey，同学！想让你的网站「换个皮肤」吗？这一篇教你如何配置 iFluxArt 的主题外观～ 🖌️

🤔 什么是主题？

主题就是控制网站「长什么样」的东西——颜色、字体、间距、阴影等等。在 iFluxArt 中，我们使用：

Tailwind CSS —— 负责具体样式
next-themes —— 负责主题切换（明暗模式）
CSS Variables —— 统一定义颜色等变量

💡 想象一下：主题就像「皮肤」，可以随时切换，但内在（功能）不变！

🌗 明暗模式

iFluxArt 支持自动切换明暗主题，跟随用户的系统设置。

工作原理

typescript

// 主题提供组件
<ThemeProvider
  attribute="class"       // 用 class 切换主题
  defaultTheme="dark"     // 默认暗色主题
  enableSystem={true}      // 跟随系统
  themes={['dark', 'light']}
>
  {children}
</ThemeProvider>

为什么要用 class 属性？

更可靠，避免闪烁
便于调试，一眼看出当前主题

手动切换

用户也可以手动选择偏好，会保存在 localStorage 中。

🎨 自定义配色

方法一：CSS 变量

在 globals.css 中覆盖变量：

css

@layer base {
  :root {
    /* 主色调 */
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    /* 背景色 */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.4%;
  }

  .dark {
    --background: 222.2 84% 4.4%;
    --foreground: 210 40% 98%;
  }
}

方法二：通过配置（待实现）

未来会支持通过配置文件或 UI 来调整主题。

🔤 字体配置

iFluxArt 使用 next/font 自动优化字体加载：

typescript

// layout.tsx
import { Inter, JetBrains_Mono, Noto_Sans_SC } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

const notoSansSC = Noto_Sans_SC({
  subsets: ['latin'],
  variable: '--font-sc',
});

字体含义：

Inter —— 正文字体，清晰易读
JetBrains Mono —— 代码字体，编程专用
Noto Sans SC —— 中文衬体，优雅美观

📐 设计系统

间距系统

名称	值	用途
`xs`	0.25rem (4px)	紧凑元素
`sm`	0.5rem (8px)	小间距
`md`	1rem (16px)	默认间距
`lg`	1.5rem (24px)	大间距
`xl`	2rem (32px)	区块间距

圆角系统

名称	值	用途
`sm`	2px	按钮、小元素
`md`	4px	卡片
`lg`	8px	大卡片
`full`	9999px	圆形元素

阴影系统

名称	效果
`sm`	轻微阴影
`md`	中等阴影
`lg`	明显阴影
`xl`	强烈阴影

🔧 在组件中使用主题

条件样式

typescript

// 根据主题调整样式
<div className={cn(
  'bg-white',      // 亮色背景
  'dark:bg-slate-900',  // 暗色背景
)} />

使用 CSS 变量

typescript

// 通过 var(--xxx) 使用
<div style={{ 
  backgroundColor: 'var(--background)',
  color: 'var(--foreground)',
}} />

💡 定制建议

1. 保持统一

建议选定一套主色调，全站保持一致。不要超过 3 种主色！

2. 考虑可访问性

文字和背景要有足够对比度
不要只用颜色传达信息（比如按钮状态）

3. 测试各种场景

在明暗两种模式下都测试，确保阅读体验一致。

📋 文件位置

text

apps/web/src/
├── app/
│   ├── layout.tsx          # 字体配置
│   └── globals.css         # 主题变量
└── theme-provider.tsx      # 主题切换逻辑

🔗 下一步

部署配置 —— 上线后主题配置
首页配置 —— 在首页应用主题
组件使用 —— MDX 中的主题组件

🎨 主题是网站的「衣服」，穿得漂亮，用户才愿意多停留！

Hey，同学！想让你的网站「换个皮肤」吗？这一篇教你如何配置 iFluxArt 的主题外观～ 🖌️

🤔 什么是主题？

主题就是控制网站「长什么样」的东西——颜色、字体、间距、阴影等等。在 iFluxArt 中，我们使用：

Tailwind CSS —— 负责具体样式
next-themes —— 负责主题切换（明暗模式）
CSS Variables —— 统一定义颜色等变量

💡 想象一下：主题就像「皮肤」，可以随时切换，但内在（功能）不变！

🌗 明暗模式

iFluxArt 支持自动切换明暗主题，跟随用户的系统设置。

工作原理

typescript

// 主题提供组件
<ThemeProvider
  attribute="class"       // 用 class 切换主题
  defaultTheme="dark"     // 默认暗色主题
  enableSystem={true}      // 跟随系统
  themes={['dark', 'light']}
>
  {children}
</ThemeProvider>

为什么要用 class 属性？

更可靠，避免闪烁
便于调试，一眼看出当前主题

手动切换

用户也可以手动选择偏好，会保存在 localStorage 中。

🎨 自定义配色

方法一：CSS 变量

在 globals.css 中覆盖变量：

css

@layer base {
  :root {
    /* 主色调 */
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    /* 背景色 */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.4%;
  }

  .dark {
    --background: 222.2 84% 4.4%;
    --foreground: 210 40% 98%;
  }
}

方法二：通过配置（待实现）

未来会支持通过配置文件或 UI 来调整主题。

🔤 字体配置

iFluxArt 使用 next/font 自动优化字体加载：

typescript

// layout.tsx
import { Inter, JetBrains_Mono, Noto_Sans_SC } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
});

const notoSansSC = Noto_Sans_SC({
  subsets: ['latin'],
  variable: '--font-sc',
});

字体含义：

Inter —— 正文字体，清晰易读
JetBrains Mono —— 代码字体，编程专用
Noto Sans SC —— 中文衬体，优雅美观

📐 设计系统

间距系统

名称	值	用途
`xs`	0.25rem (4px)	紧凑元素
`sm`	0.5rem (8px)	小间距
`md`	1rem (16px)	默认间距
`lg`	1.5rem (24px)	大间距
`xl`	2rem (32px)	区块间距

圆角系统

名称	值	用途
`sm`	2px	按钮、小元素
`md`	4px	卡片
`lg`	8px	大卡片
`full`	9999px	圆形元素

阴影系统

名称	效果
`sm`	轻微阴影
`md`	中等阴影
`lg`	明显阴影
`xl`	强烈阴影

🔧 在组件中使用主题

条件样式

typescript

// 根据主题调整样式
<div className={cn(
  'bg-white',      // 亮色背景
  'dark:bg-slate-900',  // 暗色背景
)} />

使用 CSS 变量

typescript

// 通过 var(--xxx) 使用
<div style={{ 
  backgroundColor: 'var(--background)',
  color: 'var(--foreground)',
}} />

💡 定制建议

1. 保持统一

建议选定一套主色调，全站保持一致。不要超过 3 种主色！

2. 考虑可访问性

文字和背景要有足够对比度
不要只用颜色传达信息（比如按钮状态）

3. 测试各种场景

在明暗两种模式下都测试，确保阅读体验一致。

📋 文件位置

text

apps/web/src/
├── app/
│   ├── layout.tsx          # 字体配置
│   └── globals.css         # 主题变量
└── theme-provider.tsx      # 主题切换逻辑

🔗 下一步

部署配置 —— 上线后主题配置
首页配置 —— 在首页应用主题
组件使用 —— MDX 中的主题组件

🎨 主题是网站的「衣服」，穿得漂亮，用户才愿意多停留！