> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# Tema del producto

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

## Configuración y ajustes

Antes de cualquier paso, lea [Antes de comenzar](https://supastack.dev/es/docs/web/before-you-start.md) y [Conceptos básicos del terminal](https://supastack.dev/es/docs/web/terminal-basics.md). 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

En los consumidores de la aplicación, prefiere var(--page|--section|--raised|--text|--muted|--border|--accent|…) (app-theme.css, aliases de globals.css, rutas de WorkspaceShell). No vuelvas a introducir superficies color verde azulado/hex claro ni fijes el hex de Obsidian en la interfaz del producto.

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.


## Siguiente

[Kit de UI y bloques](https://supastack.dev/es/docs/web/ui-kit.md)