跳到正文
Codex DesignBETA
简体中文
安装

shadcn 主题生成器。

选一个品牌色、圆角和字体，就能得到完整的 shadcn/ui 主题（浅色和深色），并在真实的 shadcn 组件上预览。可以导出成 globals.css、DESIGN.md 或 shadcn registry 文件。全程在浏览器里运行，你选的内容不会上传。

圆角
创建项目一键部署你的新项目。
总收入$45,231.89比上月 +20.1%
邮件通知每周收到一份活动摘要。
新次要描边
/* 我的主题 — https://codexdesign.io/tools/shadcn-theme-generator */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&family=JetBrains+Mono:wght@400&display=swap");
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --radius: 0.5rem;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --background: oklch(0.99 0.005 258.324);
  --foreground: oklch(0.149 0.009 263.967);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.149 0.009 263.967);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.149 0.009 263.967);
  --primary: oklch(0.573 0.199 261.837);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.966 0.009 258.336);
  --secondary-foreground: oklch(0.209 0.01 268.187);
  --muted: oklch(0.966 0.009 258.336);
  --muted-foreground: oklch(0.54 0.021 261.3);
  --accent: oklch(0.95 0.024 262.095);
  --accent-foreground: oklch(0.209 0.01 268.187);
  --destructive: oklch(0.578 0.236 27.389);
  --border: oklch(0.921 0.008 260.732);
  --input: oklch(0.921 0.008 260.732);
  --ring: oklch(0.573 0.199 261.837);
  --chart-1: oklch(0.573 0.199 261.837);
  --chart-2: oklch(0.65 0.159 321.917);
  --chart-3: oklch(0.65 0.161 51.607);
  --chart-4: oklch(0.65 0.144 112.121);
  --chart-5: oklch(0.651 0.111 201.755);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.149 0.009 263.967);
  --sidebar-primary: oklch(0.573 0.199 261.837);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.95 0.024 262.095);
  --sidebar-accent-foreground: oklch(0.209 0.01 268.187);
  --sidebar-border: oklch(0.921 0.008 260.732);
  --sidebar-ring: oklch(0.573 0.199 261.837);
}

.dark {
  --background: oklch(0.144 0.009 262.987);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0.01 268.174);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0.01 268.174);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.72 0.145 261.777);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.271 0.009 255.578);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.271 0.009 255.578);
  --muted-foreground: oklch(0.71 0.019 261.324);
  --accent: oklch(0.301 0.049 261.495);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.188 22.146);
  --border: oklch(0.301 0.008 264.452);
  --input: oklch(0.34 0.007 264.469);
  --ring: oklch(0.72 0.145 261.777);
  --chart-1: oklch(0.7 0.157 261.589);
  --chart-2: oklch(0.721 0.16 321.596);
  --chart-3: oklch(0.72 0.16 51.708);
  --chart-4: oklch(0.719 0.159 111.848);
  --chart-5: oklch(0.721 0.123 201.605);
  --sidebar: oklch(0.205 0.01 268.174);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.72 0.145 261.777);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.301 0.049 261.495);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.301 0.008 264.452);
  --sidebar-ring: oklch(0.72 0.145 261.777);
}

@theme inline {
  --font-sans: var(--font-sans);
  --font-heading: var(--font-heading);
  --font-mono: var(--font-mono);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-heading);
  }
}
颜色相近的设计系统

在你的浏览器里运行，放进来的内容不会上传，也不会保存。

怎么生成 shadcn 主题

  1. 选择品牌色。 点色块选色，或者直接输入 HEX、rgb()、hsl()、oklch() 格式的颜色。它会成为 primary 和焦点框的颜色，默认是 #2F6FEB。
  2. 选一个圆角：0、0.25、0.5、0.75 或 1，单位是 rem，所以 0.5 就是 8px，默认 0.5。
  3. 选一种字体，九种可选：Inter、Geist、DM Sans、Manrope、Plus Jakarta Sans、IBM Plex Sans、Space Grotesk、Source Serif 4 和 Fraunces。标题和正文都用它，默认是 Manrope。
  4. 在预览上方切换「浅色」和「深色」。 预览是一个用 shadcn 组件搭的示例面板：创建项目的表单、带五种图表颜色柱状图的收入卡片、一个开关、徽标，以及一个危险操作按钮。
  5. 导出主题，预览下面有三个标签：globals.css、DESIGN.md 和 shadcn registry JSON。每个都有复制和下载。
  6. 看看相近的设计系统。 导出区下面会列出我们的设计系统库里，主色和你的颜色最接近的三套。

主题里有什么

  • shadcn 主题的全部 23 个颜色变量，浅色和深色各一套，写成 oklch() 值：background、foreground、card、popover、primary、secondary、muted、accent、destructive、border、input、ring 和 chart-1 到 chart-5，其中 card、popover、primary、secondary、muted 和 accent 各自带一个前景色。globals.css 里还会按它们生成八个侧边栏变量。
  • 圆角。 --radius 跟着你的选择走，小、中、大和特大的圆角尺寸都由它算出来。
  • 字体。 你选的字体用于标题和正文，代码用 JetBrains Mono，文件里会从 Google Fonts 引入它们。

三种导出

  • globals.css 是给用 shadcn/ui 的 Tailwind v4 项目的样式表：字体引入、带浅色颜色、圆角和字体的 :root 块、带深色颜色的 .dark 块，以及把这些变量对应到 Tailwind 颜色类名的 @theme inline 块。
  • DESIGN.md 是给 Codex 和其他 Agent 读的文件：浅色主题的颜色（secondary 和 tertiary 取自第二、第三个图表颜色）、用你选的字体写的字号阶梯、圆角、以 4px 为基数的间距、一个主按钮，以及按格式规定的章节写的简短说明。章节标题是格式规定的，保持英文；说明文字是中文，比较笼统，你可以再补上自己的规则。
  • shadcn registry JSON 是 registry:theme 类型的 shadcn registry 项，名为 my-theme，包含字体、圆角以及浅色和深色颜色，用于把主题放进 shadcn registry。放进去之后，可以用 npx shadcn add 加上网址来添加，设计系统库安装主题用的就是这种方式。

在 Codex 里使用

  1. 把主题加进你的项目。 用导出的内容替换你 globals.css 里的颜色、圆角和字体变量，:root 和 .dark 里的都要换。
  2. 把 DESIGN.md 保存到项目根目录，并在 AGENTS.md 里指向它，写法见 DESIGN.md 指南。
  3. 让 Codex 使用主题 token，不要自己挑颜色：
套用 shadcn 主题
把 [导出的 globals.css] 里的主题套用到这个 shadcn/ui 项目：把我们 globals.css 里的颜色、--radius 和字体变量，在 :root 和 .dark 里都换成主题里的，文件里其他内容保持不变。然后重新设计 [仪表盘页面] 的样式，只用 shadcn 组件和 bg-primary、text-muted-foreground 这样的主题 token。不要写死颜色，并列出仍然写死了颜色的组件。

常见问题

免费吗？

免费，不用注册，想生成多少套主题都可以。

我选的颜色会上传吗？

不会。主题在你的浏览器里生成，你选的颜色和设置不会发送，也不会保存。预览会从 Google Fonts 加载你选的字体，这个请求带的是字体名，不是你的颜色。网站只统计工具被用过。

它怎么从一个颜色生成整套主题？

它在 OKLCH 里计算。你的颜色成为 primary 和焦点框的颜色。背景、边框和灰色用固定的明度值，并带一点你的色相。primary 上的文字用白色或黑色，取对比度更高的那个，所以对比度始终至少达到 4.5:1。五种图表颜色从你的颜色出发，沿色相环依次排开，destructive 用 shadcn 默认的红色。深色模式下，偏深的品牌色会被提亮到至少 0.72 的明度，这样才依然醒目。因为规则是固定的，同一个颜色永远得到同一套主题，所以把它当作可以继续打磨的起点。想检查其他颜色搭配，比如你自己背景上的次要文字，可以用对比度检测。

它和 tweakcn 有什么不同？

tweakcn 是开源的可视化编辑器，每个 shadcn 变量都是一个滑块或取色器，想要亲手精细调整时用它。这个生成器是快速起步：输入一个颜色，就得到完整的浅色和深色主题，还有给 Codex 用的 DESIGN.md。更详细的对比见 Codex Design 和 tweakcn 对比。如果你想从一套设计完整的系统开始，而不是从一个颜色开始，可以去看设计系统库，里面每套系统都附带 shadcn 主题。

继续阅读

Codex Design 是独立开发的 Codex 插件，与 OpenAI 无关联，也未获 OpenAI 认可。