shadcn テーマジェネレーター。
ブランドカラー、角の半径、フォントを選ぶと、ライトとダークの shadcn/ui テーマ一式ができ、本物の shadcn コンポーネントでプレビューできます。globals.css、DESIGN.md、shadcn レジストリファイルとして出力できます。ブラウザ内で動くので、選んだ内容がアップロードされることはありません。
プロジェクトを作成ワンクリックで新しいプロジェクトをデプロイします。
総売上$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 テーマの作り方
- ブランドカラーを決めます。 色見本から選ぶか、HEX、rgb()、hsl()、oklch() で入力します。その色が
primaryとフォーカスリングになり、最初は#2F6FEBです。 - 角の半径を選びます。 0、0.25、0.5、0.75、1 から選びます。単位は rem なので、0.5 は 8px です。最初は 0.5 です。
- フォントを選びます。 Inter、Geist、DM Sans、Manrope、Plus Jakarta Sans、IBM Plex Sans、Space Grotesk、Source Serif 4、Fraunces の 9 つから選びます。見出しと本文に使われ、最初は Manrope です。
- プレビューの上でライトとダークを切り替えます。 プレビューは、shadcn のコンポーネントで作ったサンプルのダッシュボードです。プロジェクトの作成フォーム、5 つのチャートカラーの棒を使った売上のカード、スイッチ、バッジ、削除ボタンが入っています。
- テーマを出力します。 プレビューの下の 3 つのタブから、globals.css、DESIGN.md、shadcn レジストリ JSON を選びます。どれもコピーとダウンロードができます。
- 近いシステムを見ます。 出力の下に、Codex Design のライブラリにあるデザインシステムのうち、メインカラーが入力した色にいちばん近い 3 つが表示されます。
テーマに含まれるもの
- 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 それぞれの foreground です。globals.css には、これらから導いた 8 つのサイドバー変数が加わります。
- 角の半径。
--radiusは選んだ値に従い、小・中・大・特大の角のサイズはそれをもとに計算されます。 - フォント。 選んだフォントが見出しと本文のフォントになり、コード用には JetBrains Mono が使われます。ファイルは、それらすべてを Google Fonts からインポートします。
3 つの出力形式
- globals.css は、shadcn/ui を使う Tailwind v4 プロジェクト用のスタイルシートです。フォントのインポート、ライトの色・角の半径・フォントを入れた
:rootブロック、ダークの色を入れた.darkブロック、そして変数を Tailwind の色クラスに対応づける@theme inlineブロックが入っています。 - DESIGN.md は、Codex などのエージェント用のファイルです。ライトテーマの色（secondary と tertiary は、2 番目と 3 番目のチャートカラー）、選んだフォントでのタイプスケール、角の半径、4px 基準の余白、プライマリボタン、そしてフォーマットの各セクション見出しの下の短いメモが入っています。メモは汎用的なものなので、自分のルールを書き足してください。
- shadcn レジストリ JSON は、
registry:themeタイプの shadcn レジストリアイテムとしてのテーマで、名前はmy-theme、フォント、角の半径、ライトとダークの色が入っています。shadcn レジストリにテーマを置くためのもので、デザインシステムライブラリがテーマをインストールさせるのと同じように、npx shadcn addと URL で追加できます。
Codex で使う
- テーマをプロジェクトに追加します。
globals.cssのカラー、角の半径、フォントの変数を、出力したものに置き換えます。:rootと.darkの両方です。 - DESIGN.md を保存します。 プロジェクトのルートに置き、DESIGN.md のガイドで説明しているように、AGENTS.md から指します。
- Codex に、独自の色ではなくトークンを使うよう頼みます：
shadcn テーマを適用
[出力した globals.css] のテーマを、この shadcn/ui プロジェクトに適用してください。globals.css のカラー、--radius、フォントの変数を、テーマのものに置き換え（:root と .dark の両方）、ファイルのそれ以外の部分はそのまま残してください。そのうえで、[ダッシュボードページ] を、shadcn のコンポーネントと、bg-primary や text-muted-foreground といったテーマのトークンだけを使ってスタイリングし直してください。色をハードコードせず、まだ色を直接指定しているコンポーネントがあれば挙げてください。
よくある質問
無料ですか？
はい。無料で登録も不要、作れるテーマの数にも制限はありません。
選んだ色はアップロードされますか？
いいえ。テーマはブラウザ内で作られ、選んだ色や設定は送信も保存もされません。プレビューは選んだフォントを Google Fonts から読み込みますが、そのリクエストに含まれるのはフォント名で、色ではありません。サイトが記録するのは、ツールが使われたことだけです。
1 色からどうやってテーマ全体を作っているのですか？
OKLCH で計算しています。選んだ色が primary とフォーカスリングになります。背景、ボーダー、グレーは固定の明度を使い、入力した色の色相がわずかに入ります。primary の上の文字は、白と黒のうちコントラストが高い方なので、常に 4.5:1 以上になります。5 つのチャートカラーは、入力した色から色相環を順に進んで選ばれ、destructive は shadcn 標準の赤です。ダークモードでは、暗いブランドカラーは明度 0.72 以上に引き上げられるので、目立たなくなりません。ルールは固定なので、同じ色からは常に同じテーマができます。磨き込むための出発点として使ってください。muted の文字を自分の背景に重ねた場合など、ほかの組み合わせを確かめるには、コントラストチェッカーを使ってください。
tweakcn とは何が違いますか？
tweakcn は、shadcn のすべての変数をスライダーやカラーピッカーで操作できるオープンソースのビジュアルエディターなので、手で細かく調整したいときに向いています。このジェネレーターはクイックスタート用です。1 色を入れると、ライトとダークのテーマ一式が、Codex 用の DESIGN.md と一緒にできます。詳しくは tweakcn との比較をご覧ください。1 色からではなく、すでにデザインされたシステムから始めたいなら、どのシステムにも shadcn テーマが付いているデザインシステムライブラリをご覧ください。