主题市场创作指南

🎨 主题创作指南

了解 ForcedSkin 主题的 JSON 结构与颜色字段规范，为任意网站设计专属配色并提交给社区共享。

快速开始

选择模式

决定你的主题运行在 light （亮色）还是 dark （暗色）模式。

填写颜色

按下方字段规范填写 JSON，至少包含全部必填键。

提交审核

在主题点击「提交主题」，等待管理员审核通过后对所有用户可见。

颜色字段规范

所有颜色值为十六进制（#RRGGBB）或 CSS rgba(...) 字符串。

background必填

页面主背景。亮色主题接近白，暗色主题接近深中性色。CSS：--color-background

示例： #F8FFF8 / #101410

foreground必填

主文字色，与背景保持高对比。CSS：--color-foreground

示例： #2C3E2C / #E0E0E0

surface必填

卡片、面板容器背景，略高于/低于主背景。CSS：--color-surface

示例： #F0FFF0 / #1E221E

surfaceMuted可选

次级容器、悬浮等更弱一层背景。CSS：--color-surface-muted

示例： #F5FDF5 / #161816

border必填

分割线、描边，常为低饱和灰或半透明。CSS：--color-border

示例： #D8E8D8 / #333633

muted必填

次要文案、占位符等降调文本。CSS：--color-muted

示例： #6C7E6C / #A0A0A0

primary必填

主色色阶，用于按钮、链接与高亮；可为单色或 50–950 对象，至少含 500/600/700，对应变量名 --color-primary- 加色阶编号

示例： { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondary可选

次要色阶，用于芯片、幽灵按钮等；结构同 primary。CSS：--color-secondary- 加色阶编号

示例： { "500": "#AAA", ... }

accent可选

强调色阶，用于徽章、提示高亮等；结构同 primary。CSS：--color-accent- 加色阶编号

示例： { "500": "#FFEB3B", ... }

vars可选

额外 CSS 自定义属性；键不带 --，值为合法 CSS，将注入 :root

示例： { "custom-radius": "8px" }

色阶（Color Scale）

primary、secondary、accent 三个调色对象均支持以下两种写法之一：

简写（仅核心 3 档）

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

引擎以 500 为主色，600/700 承接悬浮与激活态。

完整色阶（50 ~ 950，共 11 档）

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

推荐提供完整色阶，让深浅场景过渡更自然。

提示： 色阶编号遵循 Tailwind CSS 规范，50 最浅（近白），950 最深（近黑）。亮色主题通常以 500/600/700 为主用色，暗色主题可以偏向 400/500/600。

完整示例

🌿 亮色主题示例（light-mint）

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 暗色主题示例（dark-forest）

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

自定义变量（vars）

若标准字段不够用，可在 vars 中声明额外 CSS 变量；键名不含 -- 前缀。

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

标识命名规范（name）

仅允许小写字母、数字与连字符（ a-z 0-9 - ）。
推荐使用「模式-风格」式命名，例如 dark-ocean、light-sakura。
标识全局唯一且创建后不可更名，请慎重选择。
长度 ≤ 50 个字符。

提交与审核流程

🔐 提交前需登录账号。

⏳ 提交后为待审核，管理员通常 1～3 个工作日内处理。

✅ 审核通过后将在主题市场公开，可被收藏与选用。

❌ 颜色非法、名称冲突或违规内容会被拒绝，请修正后重新提交。

🚫 禁止提交恶意代码、仇恨或明显侵权的配色内容。

准备好了？前往主题市场提交你的作品。

🎨 前往提交主题