K
KoreUI

Theme Switch

Theme

Componente para alternar entre modo claro, oscuro y sistema. Tres variantes visuales con estado compartido.

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
Toggle
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" />
{{-- 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.

sm
md
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.

Múltiples instancias sincronizadas 
{{-- 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.

Acceso directo al store 
{{-- 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>
Propiedad / Método Tipo Descripción
$store.koreTheme.mode string 'light', 'dark' o 'system'
$store.koreTheme.isDark boolean true si el tema resuelto es oscuro
$store.koreTheme.setMode(mode) function Cambia el tema y persiste en localStorage

Accesibilidad

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

Variante Role Teclado
segmented radiogroup + radio Tab entre botones, Space/Enter para seleccionar
toggle switch con aria-checked Space/Enter para alternar
dropdown menu + menuitem Escape cierra, Space/Enter selecciona

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

Props

Prop Tipo Default Descripción
variant string segmented Variante visual: segmented, toggle, dropdown
size string md Tamaño: sm, md, lg
labels bool false Mostrar texto junto a los iconos
lightLabel string Light Texto para el modo claro
darkLabel string Dark Texto para el modo oscuro
systemLabel string System Texto para el modo sistema

Configuración

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

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
],