Tema (Modo Oscuro/Claro) | Design System Docs

1. Configuración del Layout

Debes incluir ThemeScript en el <head> de tu layout principal. Este script se encarga de leer las preferencias del sistema o del localStorage inmediatamente antes de renderizar la página, evitando el parpadeo de color.

Code Snippet


---
import { ThemeScript } from "design-system-astro";
---

<html lang="es">
  <head>
    <ThemeScript /> 
  </head>
  <body>
    <slot />
  </body>
</html>

2. Componente de Toggle

Simplemente importa y coloca el componente ThemeToggle en tu Navbar, Footer o cualquier área de configuración.

Instancia 1

Instancia 2

Code Snippet


---
import { ThemeToggle } from "design-system-astro";
---

<ThemeToggle />

3. Personalización

Puedes personalizar los iconos usando las props darkIcon y lightIcon, o usar los slots dark y light para mayor control.

Emojis Props

Slots

Code Snippet


---
import { ThemeToggle } from "design-system-astro";
---

<ThemeToggle darkIcon="🌚" lightIcon="🌞" />

<!-- Or using slots -->
<ThemeToggle>
  <span slot="light">LIGHT</span>
  <span slot="dark">DARK</span>
</ThemeToggle>

3. Control Programático (theme.ts)

Si necesitas cambiar el tema manualmente desde otro script o componente, puedes importar las utilidades desde el sistema:

Ejemplo de cómo usar setTheme para cambiar el tema programáticamente.

Code Snippet


import { setTheme } from "design-system-astro";
setTheme('dark'); // 'light' | 'dark' | 'system'