Lily Design System™

Temas

Los componentes de Lily tienen ganchos de clase estables y cero CSS, así que un tema es solo una hoja de estilos. Este tutorial va de «enlaza un archivo» a «deja que el usuario cambie de tema en tiempo de ejecución, con persistencia».

Qué vas a construir

Una aplicación cuyo aspecto completo el usuario puede cambiar: empezando con una hoja de estilos enlazada y terminando con un conmutador de temas persistente en tiempo de ejecución, en unos 15 minutos.

Antes de empezar

Termina primero el tutorial del framework de tu stack primero, para tener un pequeño formulario de Lily al que aplicar el tema. Todo aquí funciona en los siete frameworks; los ejemplos de código muestran Svelte y HTML simple.

Paso 1: Enlaza un tema ya hecho

themes/ el directorio contiene 45 hojas de estilo independientes. Cópialas a los recursos estáticos de tu aplicación y enlaza una: 

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Lo más destacado del conjunto:

  • Sector público : NHS England / Scotland / Wales, cada uno en variantes para pacientes y para profesionales; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirados en proveedores — adobe-spectrum, mozilla-protocol.
  • Propósito general — light, dark, nord, dracula, wireframe, corporate, synthwave, y muchos más.

Comprueba tu trabajo: recarga la página. El mismo marcado que construiste en el tutorial del framework ahora tiene estilo completo: botones, entradas, etiquetas, anillos de foco. Una línea de HTML lo logró; cada componente permaneció exactamente como estaba.

Paso 2: Anula lo que quieras

Los selectores del tema están envueltos en :where(...)que tiene especificidad cero, así que cualquier regla que escribas gana, sin más: 

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Paso 3: Cambio en tiempo de ejecución con theme-picker

theme-picker el asistente es un botón de icono sin cabeza + cuadro de lista que es dueño de todo el ciclo de vida del tema: carga la hoja de estilos elegida cambiando un único <link> administrado (solo se descarga el tema activo), establece data-theme="{slug}" en el documento y, opcionalmente, persiste en localStorage. Aquí se muestra Svelte; los ports de React, Vue, Angular, HTML, Nunjucks y Blazor coinciden contrato por contrato: 

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Esa es toda la integración. El comportamiento del teclado sigue el patrón de cuadro de lista de WAI-ARIA APG; el control en sí no tiene cabeza (gancho de clase .theme-picker), así que adopta el tema que esté activo.

Verificado el 2026-08-29: este fragmento exacto se compiló contra el paquete 0.1.1 publicado, mediante svelte/server.

Paso 4: Reacciona al tema en tu propio CSS

Como el asistente establece data-theme en la raíz del documento, tus propios estilos pueden ramificarse a partir de él: 

[data-theme="dark"] .site-logo { filter: invert(1); }

Notas sobre el renderizado en el servidor

El asistente realiza todas las escrituras en el DOM dentro del ciclo de vida mount/effect del framework, así que es seguro para SSR por construcción. Para evitar un destello en el primer pintado, renderiza en el servidor el <link> y data-theme del tema inicial (por ejemplo, a partir de una cookie); el repositorio del asistente de Svelte incluye un ejemplo ejecutable de cookie para SvelteKit, y los demás catálogos documentan el mismo patrón para sus stacks.

Próximos pasos

  • Asistentes de preferencias : el mismo patrón para idioma, tamaño de texto, compartir y entrada de fecha/hora.
  • Aporta un tema: cada uno es una hoja de estilos independiente que apunta a los ganchos de clase; consulta cómo contribuir.

¿Dudas por el camino? La página de ayuda está llena de respuestas, y si algún paso puede ser más claro, cuéntanoslo y con gusto mejoraremos el tutorial.