Workbeat Design System
Themes y modo oscuro
Cambia el theme y el modo en vivo, y entiende la precedencia default → theme → host.
Theme
Modo de color
Activo: claro · theme del WDS: default (fuente: default)
Badge
Secundario
ActivoContrato por vencerBloqueado Notificaciones
Theme transversal
Ningún patrón tiene variantes por marca. Si algo no reacciona al theme, es un valor hardcodeado: se corrige en el DS, no con un override local.
--background…--foreground…--card…--muted…--muted-foreground…--border…--primary…--primary-foreground…--primary-hover…--primary-subtle…--secondary…--accent…--ring…--success…--warning…--danger…--info…--destructive…--chart-1…--chart-2…--chart-3…--chart-4…--chart-5…- Prop
themedeWDSProvider(forzado por el host). - Claim
Themedel usuario autenticado (mientras la sesión resuelve, el último claim en caché de la pestaña:source: "cache"). - Theme default del DS.
El theme se aplica como data-wds-theme en <html>, antes del primer paint gracias a WDSThemeBootstrap. Los tokens del host fuera de @layer siempre ganan.
tsx
// Forzar un theme para todo el host (gana sobre el claim del usuario):
<WDSProvider theme="soriana" authAdapter={authAdapter}>
<App />
</WDSProvider>
// Sin prop: cada usuario ve el theme de su claim `Theme` (o el default).
<WDSProvider authAdapter={authAdapter}>
<App />
</WDSProvider>tsx
// El DS no activa el modo oscuro: el host pone `.dark` en <html>
// (no en un contenedor: los portales de Radix montan en <body>).
document.documentElement.classList.toggle("dark", isDark);css
/* CSS del host, SIN @layer y después del @import: siempre gana a default y theme.
Sólo con un rebrand aprobado; escalas completas de primitivos, no semánticos sueltos. */
@import "./design-system/styles.css";
:root {
--primary-50: …;
--primary-500: …; /* ancla de marca */
--primary-950: …;
}tsx
import { useWDSTheme } from "@/design-system/hooks/useWDSTheme";
const { theme, source, themes } = useWDSTheme();
// source: "prop" | "claim" | "cache" | "default"Más detalle en Guías · Design tokens y theming y Referencia · Theme.