Zum Inhalt springen
Codex DesignBETA
Deutsch
Installation

shadcn-Theme-Generator.

Wähle eine Markenfarbe, einen Eckenradius und eine Schrift und erhalte ein komplettes shadcn/ui-Theme, hell und dunkel, in der Vorschau an echten shadcn-Komponenten. Exportiere es als globals.css, als DESIGN.md oder als shadcn-Registry-Datei. Das Tool läuft in deinem Browser, und nichts, was du auswählst, wird hochgeladen.

Radius
Projekt erstellenStelle dein neues Projekt mit einem Klick bereit.
Gesamtumsatz$45,231.89+20,1 % gegenüber dem Vormonat
E-Mail-BenachrichtigungenErhalte jede Woche eine Zusammenfassung der Aktivität.
NeuSekundärUmrandet
/* Mein Theme — 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);
  }
}
Designsysteme mit ähnlicher Farbe

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So erstellst du ein shadcn-Theme

  1. Wähle deine Markenfarbe. Nimm das Farbfeld oder gib sie als HEX, rgb(), hsl() oder oklch() ein. Sie wird zu primary und zum Fokusring und startet bei #2F6FEB.
  2. Wähle einen Radius aus 0; 0,25; 0,5; 0,75 und 1, in rem, 0,5 sind also 8px. Er startet bei 0,5.
  3. Wähle eine Schrift aus neun: Inter, Geist, DM Sans, Manrope, Plus Jakarta Sans, IBM Plex Sans, Space Grotesk, Source Serif 4 und Fraunces. Sie gilt für Überschriften und Fließtext und startet bei Manrope.
  4. Wechsle zwischen Hell und Dunkel über der Vorschau. Die Vorschau ist ein Beispiel-Dashboard aus shadcn-Komponenten: ein Formular zum Anlegen eines Projekts, eine Umsatzkarte mit Balken in den fünf Diagrammfarben, ein Schalter, Badges und ein destruktiver Button.
  5. Exportiere das Theme über die drei Tabs unter der Vorschau: globals.css, DESIGN.md und shadcn-Registry-JSON. Jeder hat Kopieren und Herunterladen.
  6. Sieh dir ähnliche Systeme an. Unter den Exporten listet die Seite die drei Designsysteme aus unserer Bibliothek, deren Hauptfarbe deiner am nächsten kommt.

Was im Theme steckt

  • Alle 23 Farbvariablen eines shadcn-Themes, hell und dunkel, als oklch()-Werte: background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring und chart-1 bis chart-5, mit einer foreground-Farbe für card, popover, primary, secondary, muted und accent. Die Datei globals.css ergänzt die acht Sidebar-Variablen, die aus ihnen abgeleitet sind.
  • Radius. --radius folgt deiner Wahl, und die Eckengrößen klein, mittel, groß und extragroß werden daraus berechnet.
  • Schrift. Deine Schrift ist die Schrift für Überschriften und Fließtext, dazu kommt JetBrains Mono für Code, und die Datei importiert alle von Google Fonts.

Die drei Exporte

  • globals.css ist ein Stylesheet für ein Tailwind-v4-Projekt mit shadcn/ui: der Schriftimport, ein :root-Block mit den hellen Farben, dem Radius und den Schriften, ein .dark-Block mit den dunklen Farben und der @theme inline-Block, der die Variablen den Farbklassen von Tailwind zuordnet.
  • DESIGN.md ist eine Datei für Codex und andere Agenten: die Farben des hellen Themes (secondary und tertiary sind seine zweite und dritte Diagrammfarbe), eine Typoskala in deiner Schrift, die Eckenradien, Abstände auf einer 4-px-Basis, ein primärer Button und kurze Notizen unter den Abschnittsüberschriften des Formats. Die Notizen sind allgemein gehalten, ergänze also deine eigenen Regeln.
  • shadcn-Registry-JSON ist das Theme als shadcn-Registry-Item vom Typ registry:theme mit dem Namen my-theme, mit den Schriften, dem Radius und den hellen und dunklen Farben. Es dient dazu, das Theme in eine shadcn-Registry zu legen, wo es mit npx shadcn add und einer URL hinzugefügt werden kann, so wie die Designsystem-Bibliothek ihre Themes installiert.

Mit Codex verwenden

  1. Füge das Theme deinem Projekt hinzu. Ersetze die Farb-, Radius- und Schriftvariablen in deiner globals.css durch die exportierten, sowohl in :root als auch in .dark.
  2. Speichere die DESIGN.md im Stammverzeichnis deines Projekts und verweise in der AGENTS.md darauf, wie die Anleitung zu DESIGN.md zeigt.
  3. Bitte Codex, die Tokens zu verwenden, nicht eigene Farben:
shadcn-Theme anwenden
Wende das Theme aus [der exportierten globals.css] auf dieses shadcn/ui-Projekt an: Ersetze die Farb-, --radius- und Schriftvariablen in unserer globals.css durch die aus dem Theme, sowohl in :root als auch in .dark, und lass alles andere in der Datei unverändert. Gestalte danach [die Dashboard-Seite] neu und verwende dabei nur shadcn-Komponenten und Theme-Tokens wie bg-primary und text-muted-foreground. Schreib keine Farben fest in den Code und liste jede Komponente auf, die noch eine enthält.

Häufige Fragen

Ist das Tool kostenlos?

Ja. Es ist kostenlos, braucht keine Anmeldung, und du kannst beliebig viele Themes erstellen.

Werden meine Farben hochgeladen?

Nein. Das Theme entsteht in deinem Browser, und deine Farbe und Einstellungen werden weder gesendet noch gespeichert. Die Vorschau lädt die gewählte Schrift von Google Fonts, und diese Anfrage nennt die Schrift, nicht deine Farben. Die Website zählt nur, dass das Tool verwendet wurde.

Wie entsteht aus einer Farbe ein ganzes Theme?

Das Tool arbeitet in OKLCH. Deine Farbe wird zu primary und zum Fokusring. Hintergründe, Rahmen und Grautöne bekommen feste Helligkeitswerte und einen Hauch deines Farbtons. Text auf der Primärfarbe ist Weiß oder Schwarz, je nachdem, was mehr Kontrast hat, und erreicht so immer mindestens 4,5:1. Die fünf Diagrammfarben laufen vom Farbton deiner Farbe aus um den Farbkreis, und destructive ist das Standardrot von shadcn. Im dunklen Modus wird eine dunkle Markenfarbe auf mindestens 0,72 Helligkeit angehoben, damit sie weiter hervorsticht. Weil die Regeln fest sind, ergibt dieselbe Farbe immer dasselbe Theme, sieh es also als Ausgangspunkt zum Verfeinern. Um andere Kombinationen zu prüfen, etwa gedämpften Text auf deinen eigenen Hintergründen, nutze den Kontrast-Checker.

Wie unterscheidet es sich von tweakcn?

tweakcn ist ein quelloffener visueller Editor, in dem jede shadcn-Variable ein Regler oder eine Farbauswahl ist, nimm ihn also, wenn du von Hand die volle Kontrolle willst. Dieser Generator ist der schnelle Einstieg: eine Farbe rein, ein komplettes helles und dunkles Theme raus, mit einer DESIGN.md für Codex. Unser Vergleich mit tweakcn nennt die Details. Und wenn du lieber von einem fertig gestalteten System statt von einer Farbe ausgehst, stöbere in der Designsystem-Bibliothek, in der jedes System ein shadcn-Theme mitbringt.

Weiterlesen

Ein unabhängiges Plugin für Codex. Nicht mit OpenAI verbunden und nicht von OpenAI unterstützt.