自定义主题

自定义主题指南

Mewx CMS UI 基于 CSS 变量 构建，提供了极高的定制灵活性。你可以轻松地调整品牌颜色、圆角、阴影等。

1. 核心原理

组件库内部的所有样式都引用了以 --blocks-* 开头的 CSS 变量。 同时，我们通过 Tailwind 预设 (Preset) 将这些变量映射到了 Tailwind 的类名中（如 text-blocks-primary）。

---

2. 自定义方式

方式 A：全局 CSS 覆盖（推荐）

你可以在项目的全局样式文件（如 globals.css 或 main.css）中，通过覆盖 :root 下的变量来更改生效主题。

globals.css

:root {
  /* 修改品牌主色 (使用空格分隔的 RGB 值) */
  --blocks-primary: 59 130 246; /* 经典的蓝色 */
  --blocks-primary-dark: 37 99 235;

  /* 修改布局圆角 */
  --blocks-radius-md: 0.75rem;

  /* 修改容器宽度 */
  --blocks-container-max-width: 90rem;
}

[!IMPORTANT] 颜色格式规范：为了支持 Tailwind 的透明度修饰符（如 text-blocks-primary/50），颜色变量必须使用空格分隔的 RGB 通道值（例如 59 130 246），严禁使用 #hex 或 rgb() 直接包裹。

---

方式 B：局部组件覆盖

如果你只想让页面中的某个特定部分使用不同的主题，可以为该容器单独设置变量：

<div style={{ "--blocks-primary": "236 72 153" } as any}>
  <CMSRender data={pageData} />
</div>

---

3. 可用的 CSS 变量

以下是你可以自定义的主要变量列表：

品牌颜色 (Colors)

变量名	说明	示例值 (RGB)
--blocks-primary	主色调	236 72 153
--blocks-accent	强调色	139 92 246
--blocks-text-heading	标题文字颜色	15 23 42
--blocks-bg-page	页面背景色	255 255 255

布局与形状 (Layout)

变量名	说明	示例值
--blocks-radius-md	中等圆角	1rem
--blocks-container-max-width	内容区最大宽度	80rem
--blocks-section-padding	区块上下间距	6rem

---

4. 亮色/暗色模式方案

根据 THEME_GUIDE.md 的规范，你可以为暗色模式定义一套不同的变量值：

/* 暗色模式示例 */
[data-theme='dark'] {
  --blocks-bg-page: 15 23 42;
  --blocks-text-heading: 248 250 252;
  --blocks-border: 51 65 85;
}

5. 生成工具建议

如果你需要 AI 帮你生成一整套和谐的主题色，我们提供了一份专门为 AI 优化的：

👉 AI 主题生成指南 (Prompt Guide)

或者：

1. 确定你的 品牌主色 (Primary Color)。
2. 确定 背景模式 (Light/Dark)。
3. 参考该指南中的规范进行生成并替换。