For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /es/docs/web/theming.md (or send Accept: text/markdown).

Tema del producto

Personaliza el chrome del producto del kit para tu SaaS, sin editar el tema de marca de marketing.

Preguntar sobre esta guía

Configuración y ajustes

Antes de cualquier paso, lea Antes de comenzar y Conceptos básicos del terminal. Estas instrucciones suponen que abrió el monorepo supastack completo en VS Code; su paquete raíz.json marca la raíz del repositorio. En los comandos pnpm, un paquete de espacio de trabajo es una aplicación o una carpeta de código compartido; En el producto, un espacio de trabajo es el contenedor de datos y el límite de seguridad de un equipo. corepack pnpm --filter ... selecciona un paquete del monorepo mientras los comandos se ejecutan desde su raíz. Si abrió solo una carpeta sincronizada para dispositivos móviles o de escritorio, no contiene el backend web, la configuración de Docker ni los scripts raíz: ejecute el backend desde este monorepo o un servidor alojado accesible y use los propios scripts de la carpeta de la plataforma. Una variable de entorno es una configuración con nombre almacenada en un archivo .env local o en su panel de hosting; reinicie la aplicación correspondiente después de cambiarla y mantenga los secretos del servidor fuera de los valores NEXT_PUBLIC_ y EXPO_PUBLIC_.

1. En VS Code, abra apps/web/app/app-theme.css para ver pantallas de productos registrados y apps/web/src/theme/catalog.ts para agregar un paquete de colores. No edite apps/web/app/theme.css para los colores del producto; controla la marca de marketing.

2. Desde la raíz del repositorio, ejecute corepack pnpm --filter @supastack/web dev y luego visite http://localhost:3000/settings/appearance..

3. Cambie un token en su sucursal local y actualice la vista previa. Esperado: los controles del panel se actualizan mientras que la página de inicio mantiene el tema de marketing seleccionado.

La marca de marketing y el tema del producto están en archivos separados. Edita apps/web/app/app-theme.css para el chrome del panel, autenticación, configuración, facturación, chat y organización. Añade paquetes de colores en apps/web/src/theme/catalog.ts. Amplía los ejes de densidad, radio, tipografía y diseño en apps/web/src/theme/presets.ts, junto con las reglas html[data-*] correspondientes en app-theme.css. Elige la identidad de marketing en apps/web/src/theme/marketing-theme.ts (MARKETING_THEME_MODE: locked | inherit | un ID de paquete) en vez de editar apps/web/app/theme.css: el bloqueo de ese archivo mediante .marketing-theme:not(.app-theme):not([data-theme]):not([data-marketing-theme="inherit"]) mantiene por defecto la marca Obsidian de la página de inicio de supastack.

En tiempo de ejecución, Ajustes → Apariencia → ThemePicker guarda el color, la densidad, el radio, la fuente y el diseño en una cookie del navegador y en localStorage para que theme-boot.ts restaure todos los ejes antes del primer pintado, y sincroniza el paquete completo de apariencia del usuario conectado entre navegadores mediante user_appearance (GET/PUT /api/account/appearance). La misma página monta la galería de interfaz del kit para que los paquetes y ajustes preestablecidos actualicen en vivo botones, campos, tarjetas, insignias y diálogos. Los detalles de diseño y ejemplos listos para copiar están en docs/design/kit-product-theme.md y docs/design/kit-ui-gallery.md.

/* Edit product chrome here — not theme.css */
.app-theme {
  --radius-card: 14px;
  background: var(--page);
  color: var(--text);
}
.app-theme .button-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

/* catalog.ts — append a ThemeDefinition with every THEME_TOKEN_NAMES entry */
{
  id: "coral",
  name: "Coral",
  colorScheme: "light",
  tokens: { "--page": "#fff7f4", "--accent": "#e06b4f" /* …full token set… */ }
}

Comandos para copiar

Siga los comentarios para ver en qué carpeta se ejecuta un comando. Si dos terminales están etiquetados, abra dos ventanas de terminal y mantenga el primer comando ejecutándose mientras usa el segundo.

corepack pnpm --filter @supastack/web dev

# In a second terminal, after changing a theme token:
corepack pnpm test -- apps/web/src/theme/contrast.test.ts

Flujo de implementación

Al añadir un paquete, mantén en verde contrast.test.ts. Al añadir un ID de ajuste, actualiza tanto presets.ts como las reasignaciones html[data-density|data-radius|data-font|data-layout] en app-theme.css para que ThemePicker y el inicio FOUC sigan alineados.

Conserva la geometría compartida de cuatro mosaicos en marketing/brand-geometry.ts para las superficies de marketing. Las marcas del encabezado siguen siendo transparentes; los iconos de favicon/aplicación conservan el fondo negro redondeado. Las páginas puramente de marketing mantienen Obsidian mientras MARKETING_THEME_MODE sigue "locked" (valor predeterminado del kit); los productos pueden fijar otro paquete o heredar la selección de quien los visita.

Verificación y solución de problemas

Si un cambio de color afecta la página de inicio de marketing, verifique que haya editado app-theme.css y revise apps/web/src/theme/marketing-theme.ts.. Si el texto se vuelve difícil de leer, restaure el valor anterior y ejecute corepack pnpm test -- apps/web/src/theme/contrast.test.ts desde la raíz antes de volver a intentarlo.

Después de editar los tokens o paquetes de tema del kit, verifica que ThemePicker en /settings/appearance actualice la galería de interfaz del kit y los chrome de /dashboard, /auth, /billing, /chat y organizaciones. Confirma que / conserve el bloqueo de marketing Obsidian (salvo que MARKETING_THEME_MODE indique otra cosa). Ejecuta los contratos unitarios del tema (catalog, presets, contrast, theme-ownership, kit-ui-gallery) y Playwright de application-theme cuando estén disponibles. Comprueba el foco de teclado, el contraste, 320px y el movimiento reducido.