Saltar al contenido
Codex DesignBETA
Español
Instalar

Generador de temas de shadcn.

Elige un color de marca, un radio de esquina y una fuente, y obtén un tema completo de shadcn/ui, claro y oscuro, con vista previa sobre componentes reales de shadcn. Expórtalo como globals.css, un DESIGN.md o un archivo de registro de shadcn. Funciona en tu navegador, así que nada de lo que eliges se sube.

Radio
Crear proyectoDespliega tu nuevo proyecto con un clic.
Ingresos totales$45,231.89+20.1% respecto al mes pasado
Notificaciones por correoRecibe cada semana un resumen de la actividad.
NuevoSecundarioContorno
/* Mi tema — 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);
  }
}
Sistemas de diseño con un color parecido

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo crear un tema de shadcn

  1. Elige tu color de marca. Escógelo en la muestra o escríbelo como HEX, rgb(), hsl() u oklch(). Se convierte en primary y en el anillo de foco, y empieza en #2F6FEB.
  2. Elige un radio entre 0, 0.25, 0.5, 0.75 y 1, en rem, de modo que 0.5 son 8px. Empieza en 0.5.
  3. Elige una fuente entre nueve: Inter, Geist, DM Sans, Manrope, Plus Jakarta Sans, IBM Plex Sans, Space Grotesk, Source Serif 4 y Fraunces. Se usa para los titulares y el cuerpo del texto, y empieza en Manrope.
  4. Cambia entre Claro y Oscuro sobre la vista previa. La vista previa es un panel de ejemplo hecho con componentes de shadcn: un formulario para crear un proyecto, una tarjeta de ingresos con barras en los cinco colores de gráfico, un interruptor, insignias y un botón destructivo.
  5. Exporta el tema desde las tres pestañas bajo la vista previa: globals.css, DESIGN.md y JSON de registro de shadcn. Cada una tiene Copiar y Descargar.
  6. Mira sistemas parecidos. Bajo las exportaciones, la página enumera los tres sistemas de diseño de nuestra biblioteca cuyo color principal más se acerca al tuyo.

Qué incluye el tema

  • Las 23 variables de color de un tema de shadcn, en claro y oscuro, como valores oklch(): background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring y chart-1 a chart-5, con un color foreground para card, popover, primary, secondary, muted y accent. El archivo globals.css añade las ocho variables de la barra lateral, tomadas de ellas.
  • Radio. --radius sigue tu elección, y los tamaños de esquina pequeño, mediano, grande y extragrande se calculan a partir de él.
  • Fuente. Tu fuente es la de los titulares y el cuerpo del texto, con JetBrains Mono para el código, y el archivo las importa todas desde Google Fonts.

Las tres exportaciones

  • globals.css es una hoja de estilos para un proyecto con Tailwind v4 y shadcn/ui: la importación de la fuente, un bloque :root con los colores claros, el radio y las fuentes, un bloque .dark con los colores oscuros y el bloque @theme inline que asigna las variables a las clases de color de Tailwind.
  • DESIGN.md es un archivo para Codex y otros agentes: los colores del tema claro (secondary y tertiary son su segundo y tercer color de gráfico), una escala tipográfica con tu fuente, los radios de esquina, el espaciado sobre una base de 4px, un botón principal y notas breves bajo los encabezados de sección del formato. Las notas son genéricas, así que añade tus propias normas.
  • JSON de registro de shadcn es el tema como un elemento de registro de shadcn de tipo registry:theme, llamado my-theme, con las fuentes, el radio y los colores claros y oscuros. Sirve para poner el tema en un registro de shadcn, donde se puede añadir con npx shadcn add y una URL, igual que la biblioteca de sistemas de diseño instala sus temas.

Úsalo con Codex

  1. Añade el tema a tu proyecto. Sustituye las variables de color, radio y fuente de tu globals.css por las exportadas, tanto en :root como en .dark.
  2. Guarda el DESIGN.md en la raíz de tu proyecto y enlázalo desde AGENTS.md, como muestra la guía de DESIGN.md.
  3. Pídele a Codex que use los tokens, no sus propios colores:
Aplicar el tema de shadcn
Aplica el tema de [el globals.css exportado] a este proyecto de shadcn/ui: sustituye las variables de color, --radius y fuente de nuestro globals.css por las del tema, tanto en :root como en .dark, y conserva todo lo demás del archivo. Después rediseña [la página del panel] usando solo componentes de shadcn y tokens del tema como bg-primary y text-muted-foreground. No pongas colores fijos en el código y enumera los componentes que aún tengan alguno.

Preguntas frecuentes

¿Es gratis?

Sí. Es gratis, no requiere registro y no hay límite de temas que puedas crear.

¿Se suben mis colores?

No. El tema se crea en tu navegador, y tu color y tus ajustes no se envían ni se guardan. La vista previa carga desde Google Fonts la fuente que eliges, y esa petición nombra la fuente, no tus colores. El sitio solo cuenta que se usó la herramienta.

¿Cómo crea un tema entero a partir de un color?

Trabaja en OKLCH. Tu color pasa a ser primary y el anillo de foco. Los fondos, los bordes y los grises toman valores de luminosidad fijos y llevan un toque de tu tono. El texto sobre el color primary es blanco o negro, el que dé más contraste, así que siempre llega al menos a 4.5:1. Los cinco colores de gráfico avanzan por la rueda de color a partir de tu color, y destructive es el rojo predeterminado de shadcn. En modo oscuro, un color de marca oscuro se sube hasta una luminosidad de al menos 0.72 para que siga destacando. Como las reglas son fijas, el mismo color siempre da el mismo tema, así que tómalo como punto de partida para refinar. Para comprobar otras parejas, como el texto atenuado sobre tus propios fondos, usa el comprobador de contraste.

¿En qué se diferencia de tweakcn?

tweakcn es un editor visual de código abierto en el que cada variable de shadcn es un control deslizante o un selector de color, así que úsalo cuando quieras un control manual. Este generador es el arranque rápido: entra un color y sale un tema completo, claro y oscuro, con un DESIGN.md para Codex. Nuestra comparativa con tweakcn tiene los detalles. Y si prefieres partir de un sistema totalmente diseñado en lugar de un solo color, explora la biblioteca de sistemas de diseño, donde cada sistema incluye un tema de shadcn.

Sigue leyendo

Un plugin independiente para Codex. No está afiliado a OpenAI ni cuenta con su respaldo.