Skip to content
Mewx CMS UI

自定义主题

自定义主题指南

Section titled “自定义主题指南”

架构概览

Section titled “架构概览”

样式系统分三层，优先级从低到高：

全局基础变量 (--blocks-*)          ← 在 :root 中定义，影响所有组件
    ↓
组件级变量 (--mewx-cms-*)          ← 在 .mewx-cms-{component} 类中定义，仅影响该组件
    ↓
组件内部的 rgb(var(--mewx-cms-*))   ← TSX 中实际使用的值

你只需要修改前两层，组件内部自动响应变化。

使用入口：CMSRender

Section titled “使用入口：CMSRender”

最终系统只使用 CMSRender 这一个组件，所有子组件由数据驱动渲染：

<CMSRender lang="zh" data={cmsData} />

由于无法给内部组件传递 className prop，覆盖样式有三种方式。

方式一：修改全局变量（影响所有组件）

Section titled “方式一：修改全局变量（影响所有组件）”

在你的 globals.css 中覆盖 --blocks-* 变量，所有组件同步变化：

:root {
  /* 改变品牌主色 → 所有按钮、链接、强调色全部变化 */
  --blocks-primary: 59 130 246;
  --blocks-primary-light: 96 165 250;
  --blocks-primary-lighter: 191 219 254;
  --blocks-primary-lightest: 239 246 255;
  --blocks-primary-dark: 37 99 235;


  /* 改变背景色 */
  --blocks-bg-page: 15 23 42;
  --blocks-bg-card: 30 41 59;


  /* 改变渐变 → 所有 CTA 按钮、Hero 背景同步变化 */
  --blocks-gradient-primary: linear-gradient(135deg, rgb(59, 130, 246), rgb(96, 165, 250));
}

适合场景：整站换主题色、亮/暗模式切换。

方式二：覆盖单个组件（只改某一个组件）

Section titled “方式二：覆盖单个组件（只改某一个组件）”

每个组件都有一个 .mewx-cms-{component} 根类，在 CSS 中直接覆盖该类的变量：

/* 只改 Features 功能区的背景和卡片阴影，不影响其他组件 */
.mewx-cms-features {
  --mewx-cms-features-bg: 15 23 42;
  --mewx-cms-features-card-bg: 30 41 59;
  --mewx-cms-features-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}


/* 只改 Header 的 CTA 按钮背景 */
.mewx-cms-header {
  --mewx-cms-header-cta-bg: linear-gradient(135deg, rgb(139, 92, 246), rgb(59, 130, 246));
}

适合场景：针对某个特定区块做定制，例如深色 Footer、浅色 Hero。

方式三：页面级隔离（同一变量在不同页面有不同值）

Section titled “方式三：页面级隔离（同一变量在不同页面有不同值）”

用父容器包裹 CMSRender，变量只在该容器内生效：

// 产品页
<div className="product-page">
  <CMSRender lang="zh" data={productData} />
</div>


// 博客页
<div className="blog-page">
  <CMSRender lang="zh" data={blogData} />
</div>
/* 产品页：蓝色主题 */
.product-page .mewx-cms-features {
  --mewx-cms-features-bg: 239 246 255;
  --mewx-cms-features-badge-bg: 219 234 254;
}


/* 博客页：绿色主题 */
.blog-page .mewx-cms-features {
  --mewx-cms-features-bg: 240 253 244;
  --mewx-cms-features-badge-bg: 220 252 231;
}

适合场景：多页面不同风格、A/B 测试、多租户系统。

暗色模式

Section titled “暗色模式”
[data-theme="dark"] {
  /* 文字 */
  --blocks-text-heading: 248 250 252;
  --blocks-text-body: 203 213 225;
  --blocks-text-muted: 148 163 184;
  --blocks-text-light: 100 116 139;


  /* 背景 */
  --blocks-bg-page: 15 23 42;
  --blocks-bg-section: 30 41 59;
  --blocks-bg-card: 30 41 59;
  --blocks-bg-card-hover: 51 65 85;


  /* 边框 */
  --blocks-border: 51 65 85;
  --blocks-border-hover: var(--blocks-primary);


  /* 阴影（暗色模式加深） */
  --blocks-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.3);
  --blocks-shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.4);
}

全局变量完整参考

Section titled “全局变量完整参考”

颜色格式说明

Section titled “颜色格式说明”

所有颜色变量使用 空格分隔的 RGB 值，不带 rgb() 包裹：

/* ✅ 正确 */
--blocks-primary: 59 130 246;


/* ❌ 错误 */
--blocks-primary: #3b82f6;
--blocks-primary: rgb(59, 130, 246);

文字颜色

Section titled “文字颜色”
变量名用途默认值 (亮色)
--blocks-text-heading标题文字15 23 42
--blocks-text-body正文文字51 65 85
--blocks-text-muted辅助文字100 116 139
--blocks-text-light最浅文字148 163 184

品牌色

Section titled “品牌色”
变量名用途默认值
--blocks-primary主色219 87 153
--blocks-primary-light浅色变体236 114 175
--blocks-primary-lighter更浅变体251 207 232
--blocks-primary-lightest最浅变体253 242 248
--blocks-primary-dark深色变体199 55 125

强调色

Section titled “强调色”
变量名用途默认值
--blocks-accent强调色139 92 246
--blocks-accent-light浅色变体167 139 250
--blocks-accent-lightest最浅变体245 243 255

背景色

Section titled “背景色”
变量名用途默认值
--blocks-bg-page页面背景255 255 255
--blocks-bg-section区块背景248 250 252
--blocks-bg-card卡片背景255 255 255
--blocks-bg-card-hover卡片悬停背景253 242 248

边框

Section titled “边框”
变量名用途默认值
--blocks-border默认边框241 245 249
--blocks-border-hover悬停边框251 207 232

圆角

Section titled “圆角”
变量名大小默认值
--blocks-radius-sm小0.5rem
--blocks-radius-md中1rem
--blocks-radius-lg大1.5rem
--blocks-radius-xl超大2rem
--blocks-radius-2xl特大2.5rem
--blocks-radius-full圆形9999px

渐变（直接使用完整 CSS 语法）

Section titled “渐变（直接使用完整 CSS 语法）”
变量名用途
--blocks-gradient-primary主色渐变（CTA 按钮、Header）
--blocks-gradient-accent强调色渐变
--blocks-gradient-heroHero 区背景渐变
--blocks-gradient-text渐变文字
--blocks-gradient-glow光晕效果渐变

组件级变量完整参考

Section titled “组件级变量完整参考”

每个组件类名及其可覆盖变量如下：

.mewx-cms-header — 页面头部

Section titled “.mewx-cms-header — 页面头部”
变量说明
--mewx-cms-header-bg背景色
--mewx-cms-header-text标题文字色
--mewx-cms-header-body-text正文文字色
--mewx-cms-header-highlight-text高亮文字色
--mewx-cms-header-border底部边框色
--mewx-cms-header-cta-bgCTA 按钮背景（渐变）
--mewx-cms-header-cta-shadowCTA 按钮阴影
--mewx-cms-header-tip-icon-bg提示图标背景色
--mewx-cms-header-media-bg媒体元素背景色

.mewx-cms-media-hero — 媒体 Hero 区

Section titled “.mewx-cms-media-hero — 媒体 Hero 区”
变量说明
--mewx-cms-media-hero-heading-gradient标题渐变
--mewx-cms-media-hero-muted-text辅助文字色
--mewx-cms-media-hero-cta-bgCTA 按钮背景
--mewx-cms-media-hero-cta-shadowCTA 按钮阴影
--mewx-cms-media-hero-media-bg媒体区背景色

.mewx-cms-tab-carousel — 标签轮播

Section titled “.mewx-cms-tab-carousel — 标签轮播”
变量说明
--mewx-cms-tab-carousel-heading-text标题文字色
--mewx-cms-tab-carousel-tab-active-bg选中标签背景
--mewx-cms-tab-carousel-tab-inactive-bg未选中标签背景
--mewx-cms-tab-carousel-tab-inactive-text未选中标签文字
--mewx-cms-tab-carousel-panel-bg内容面板背景
--mewx-cms-tab-carousel-panel-shadow内容面板阴影
--mewx-cms-tab-carousel-cta-bgCTA 按钮背景

.mewx-cms-features — 功能区

Section titled “.mewx-cms-features — 功能区”
变量说明
--mewx-cms-features-bg区块背景色
--mewx-cms-features-badge-bg标签背景色
--mewx-cms-features-badge-text标签文字色
--mewx-cms-features-heading-text标题文字色
--mewx-cms-features-gradient-text渐变文字渐变值
--mewx-cms-features-card-bg卡片背景色
--mewx-cms-features-card-shadow卡片阴影
--mewx-cms-features-icon-bg图标背景色

.mewx-cms-feature-list — 功能列表

Section titled “.mewx-cms-feature-list — 功能列表”
变量说明
--mewx-cms-feature-list-bg区块背景色
--mewx-cms-feature-list-subtitle-text副标题文字色
--mewx-cms-feature-list-heading-text标题文字色
--mewx-cms-feature-list-card-bg卡片背景色
--mewx-cms-feature-list-card-border卡片边框色
--mewx-cms-feature-list-card-radius卡片圆角
--mewx-cms-feature-list-card-shadow卡片阴影
--mewx-cms-feature-list-card-hover-shadow卡片悬停阴影
--mewx-cms-feature-list-icon-bg图标背景色
--mewx-cms-feature-list-title-text卡片标题色
--mewx-cms-feature-list-desc-text卡片描述色

.mewx-cms-feature-carousel — 特性轮播

Section titled “.mewx-cms-feature-carousel — 特性轮播”
变量说明
--mewx-cms-carousel-heading-text标题文字色
--mewx-cms-carousel-card-bg卡片背景色
--mewx-cms-carousel-nav-bg导航按钮背景
--mewx-cms-carousel-indicator-active指示器激活色
--mewx-cms-carousel-indicator-inactive指示器默认色

.mewx-cms-feature-showcase — 特性展示

Section titled “.mewx-cms-feature-showcase — 特性展示”
变量说明
--mewx-cms-showcase-heading-text标题文字色
--mewx-cms-showcase-link-text链接文字色
--mewx-cms-showcase-media-bg媒体背景色
--mewx-cms-showcase-glow-bg光晕背景渐变

.mewx-cms-feature-slideshow — 特性幻灯片

Section titled “.mewx-cms-feature-slideshow — 特性幻灯片”
变量说明
--mewx-cms-slideshow-heading-text标题文字色
--mewx-cms-slideshow-item-active-bg激活项背景色
--mewx-cms-slideshow-item-active-text激活项文字色
--mewx-cms-slideshow-circle-active-bg激活圆圈背景
--mewx-cms-slideshow-circle-inactive-bg未激活圆圈背景

.mewx-cms-card-scroll — 卡片滚动

Section titled “.mewx-cms-card-scroll — 卡片滚动”
变量说明
--mewx-cms-card-scroll-fade-bg边缘渐隐背景色
--mewx-cms-card-scroll-card-bg卡片背景色
--mewx-cms-card-scroll-card-shadow卡片阴影
--mewx-cms-card-scroll-text内容文字色
--mewx-cms-card-scroll-author-name-text作者名文字色

.mewx-cms-call-to-action — 行动召唤区

Section titled “.mewx-cms-call-to-action — 行动召唤区”
变量说明
--mewx-cms-cta-bg区块背景色
--mewx-cms-cta-heading-text标题文字色
--mewx-cms-cta-blob-accent装饰光晕颜色

.mewx-cms-footer-section — 底部 CTA 区

Section titled “.mewx-cms-footer-section — 底部 CTA 区”
变量说明
--mewx-cms-footer-section-bg背景渐变
--mewx-cms-footer-section-heading-text标题文字色
--mewx-cms-footer-section-cta-bgCTA 按钮背景

.mewx-cms-steps — 步骤区

Section titled “.mewx-cms-steps — 步骤区”
变量说明
--mewx-cms-steps-heading-text标题文字色
--mewx-cms-steps-card-bg步骤卡片背景
--mewx-cms-steps-number-bg序号背景色
--mewx-cms-steps-number-text序号文字色

.mewx-cms-steps-gradient — 步骤区（渐变版）

Section titled “.mewx-cms-steps-gradient — 步骤区（渐变版）”
变量说明
--mewx-cms-steps-gradient-heading-text标题文字色
--mewx-cms-steps-gradient-card-bg卡片背景色
--mewx-cms-steps-gradient-number-text序号文字色
--mewx-cms-steps-gradient-item-hover-heading-text悬停标题色

.mewx-cms-how-to-use — 使用指引

Section titled “.mewx-cms-how-to-use — 使用指引”
变量说明
--mewx-cms-how-to-use-bg区块背景色
--mewx-cms-how-to-use-heading-text标题文字色
--mewx-cms-how-to-use-step-text步骤编号颜色

.mewx-cms-help-articles — 帮助文章

Section titled “.mewx-cms-help-articles — 帮助文章”
变量说明
--mewx-cms-help-articles-heading-text标题文字色
--mewx-cms-help-articles-group-bg分组背景色
--mewx-cms-help-articles-link-icon链接图标色
--mewx-cms-help-articles-link-hover-text链接悬停色

.mewx-cms-comment — 评论滚动

Section titled “.mewx-cms-comment — 评论滚动”
变量说明
--mewx-cms-comment-heading-text标题文字色
--mewx-cms-comment-divider-color分割线颜色

.mewx-cms-link-card-list — 链接卡片列表

Section titled “.mewx-cms-link-card-list — 链接卡片列表”
变量说明
--mewx-cms-link-card-list-card-bg卡片背景色
--mewx-cms-link-card-list-title-text卡片标题色
--mewx-cms-link-card-list-title-hover-text标题悬停色

.mewx-cms-embed — 嵌入媒体（Twitter / Reddit / TikTok / YouTube）

Section titled “.mewx-cms-embed — 嵌入媒体（Twitter / Reddit / TikTok / YouTube）”
变量说明
--mewx-cms-embed-heading-text标题文字色
--mewx-cms-embed-muted-text辅助文字色

AI 生成工具

Section titled “AI 生成工具”

👉 AI 主题生成指南

“请参考 GoEnhance CMS UI 的 AI 主题生成指南，为我生成一套蓝色的亮色主题配置。”