Theme Switch

Uso básico

Variante segmented por defecto con tres opciones: light, system y dark.

<x-kore::theme-switch />

<x-kore::theme-switch />

Variantes

Tres variantes: segmented (radiogroup), toggle (switch light/dark) y dropdown (menu compacto).

{{-- Segmented (default) — light, system, dark --}}
<x-kore::theme-switch variant="segmented" />

{{-- Toggle — solo light/dark --}}
<x-kore::theme-switch variant="toggle" />

{{-- Dropdown — menu compacto --}}
<x-kore::theme-switch variant="dropdown" />

{{-- Segmented (default) — light, system, dark --}}
<x-kore::theme-switch variant="segmented" />

{{-- Toggle — solo light/dark --}}
<x-kore::theme-switch variant="toggle" />

{{-- Dropdown — menu compacto --}}
<x-kore::theme-switch variant="dropdown" />

Tamaños

Tres tamaños disponibles en todas las variantes: sm, md (default) y lg.

<x-kore::theme-switch size="sm" />
<x-kore::theme-switch size="md" />
<x-kore::theme-switch size="lg" />

<x-kore::theme-switch size="sm" />
<x-kore::theme-switch size="md" />
<x-kore::theme-switch size="lg" />

Con labels

Muestra texto junto a los iconos para mayor claridad.

{{-- Segmented con labels --}}
<x-kore::theme-switch :labels="true" />

{{-- Dropdown con labels --}}
<x-kore::theme-switch variant="dropdown" :labels="true" />

{{-- Segmented con labels --}}
<x-kore::theme-switch :labels="true" />

{{-- Dropdown con labels --}}
<x-kore::theme-switch variant="dropdown" :labels="true" />

Labels personalizados

Puedes personalizar los textos de los labels para internacionalización.

<x-kore::theme-switch
    :labels="true"
    light-label="Claro"
    dark-label="Oscuro"
    system-label="Auto"
/>

<x-kore::theme-switch
    :labels="true"
    light-label="Claro"
    dark-label="Oscuro"
    system-label="Auto"
/>

Estado compartido

Todas las instancias del theme switch en la misma página comparten el mismo estado a través del Alpine store $store.koreTheme.

Al cambiar el tema en cualquier instancia, todas las demás se actualizan instantáneamente gracias a la reactividad de Alpine.js. La preferencia se persiste en localStorage con la clave kore-theme.

{{-- En el header --}}
<x-kore::theme-switch variant="dropdown" />

{{-- En el sidebar --}}
<x-kore::theme-switch variant="segmented" />

{{-- En settings --}}
<x-kore::theme-switch variant="toggle" />

{{-- Todas se mantienen sincronizadas automáticamente --}}

{{-- En el header --}}
<x-kore::theme-switch variant="dropdown" />

{{-- En el sidebar --}}
<x-kore::theme-switch variant="segmented" />

{{-- En settings --}}
<x-kore::theme-switch variant="toggle" />

{{-- Todas se mantienen sincronizadas automáticamente --}}

Alpine Store

Puedes acceder al store directamente desde cualquier componente Alpine para crear integraciones personalizadas.

{{-- Leer el modo actual --}}
<span x-text="$store.koreTheme.mode"></span>

{{-- Verificar si está en dark mode --}}
<span x-show="$store.koreTheme.isDark">Modo oscuro activo</span>

{{-- Cambiar el tema programáticamente --}}
<button x-on:click="$store.koreTheme.setMode('dark')">
    Activar dark mode
</button>

{{-- Escuchar cambios de tema --}}
<div x-on:theme-changed.window="console.log('Tema cambió a:', $event.detail)">
    ...
</div>

{{-- Leer el modo actual --}}
<span x-text="$store.koreTheme.mode"></span>

{{-- Verificar si está en dark mode --}}
<span x-show="$store.koreTheme.isDark">Modo oscuro activo</span>

{{-- Cambiar el tema programáticamente --}}
<button x-on:click="$store.koreTheme.setMode('dark')">
    Activar dark mode
</button>

{{-- Escuchar cambios de tema --}}
<div x-on:theme-changed.window="console.log('Tema cambió a:', $event.detail)">
    ...
</div>

El evento theme-changed también se dispara cuando el sistema operativo cambia de tema mientras el modo está en system, no solo al llamar setMode() manualmente.

Accesibilidad

Cada variante implementa el patrón ARIA adecuado con soporte completo de teclado.

Todas las variantes usan focus-visible:ring-2 focus-visible:ring-kore-ring para indicación de foco visible.

Props

Configuración

Puedes configurar el tema por defecto y un nonce CSP en config/kore-ui.php.

// config/kore-ui.php
'theme' => [
    'default' => 'system',  // 'light', 'dark', 'system'
    'nonce'   => null,       // CSP nonce para el script anti-FOUC
],

// config/kore-ui.php
'theme' => [
    'default' => 'system',  // 'light', 'dark', 'system'
    'nonce'   => null,       // CSP nonce para el script anti-FOUC
],