El Caso de Uso Más Puro para Context

La gestión de temas es uno de los casos de uso más puros para context. Un tema afecta a todos los componentes visuales de una aplicación, necesita cambiar de forma dinámica y no debería requerir pasar props a través de docenas de componentes. Context te proporciona exactamente lo que el theming necesita: datos ambientales a los que cualquier descendiente puede acceder sin un cableado explícito.

Si no necesitas anulaciones de tema anidadas—diferentes partes de tu árbol de componentes usando distintos temas simultáneamente—considera el patrón useTheme hook más simple. Usa estado reactivo a nivel de módulo, no requiere providers y cubre el 95% de los casos de uso en menos de 100 líneas de código. Este artículo cubre el enfoque de Context para cuando específicamente necesitas providers anidados.

Al final de este artículo, tendrás un sistema de temas que soporta modos claro, oscuro y de preferencia del sistema; detecta y responde automáticamente a los cambios de tema del sistema operativo; persiste las preferencias del usuario en localStorage; carga sin ningún "destello del tema incorrecto"; funciona correctamente con la renderización del lado del servidor; y soporta anulaciones locales de tema a través de providers anidados.

La clave arquitectónica: CSS es la única fuente de verdad para los colores. JavaScript solo gestiona qué tema está activo estableciendo el atributo data-theme. El navegador maneja el resto de forma nativa y eficiente.

El Espacio del Problema

Antes de escribir código, considera qué hace que el theming sea genuinamente difícil. El enfoque obvio—pasar una prop theme a través de cada componente—falla de inmediato en cualquier aplicación real. Con navegación, barras laterales, tarjetas, botones, formularios, modales y tooltips que necesitan información del tema, estarías pasando la misma prop a través de cada componente de tu árbol.

Context resuelve el problema de distribución, pero el theming tiene complicaciones adicionales. Primero, está la distinción entre preferencia y resolución. Cuando un usuario selecciona "sistema" como su preferencia de tema, los componentes necesitan un tema real—claro u oscuro—para renderizar. Algo debe resolver la preferencia en un tema concreto.

Segundo, la preferencia del sistema no es estática. Los usuarios cambian su tema del sistema mientras tu aplicación está en ejecución. Tu sistema de temas debe escuchar estos cambios y responder en tiempo real.

Tercero, la renderización del lado del servidor crea un problema de temporización. El servidor renderiza HTML sin conocer la preferencia del usuario. Para cuando JavaScript carga y lee localStorage, el navegador ya ha pintado la página con el tema incorrecto. Los usuarios ven un destello perturbador.

Cuarto, las anulaciones anidadas son un requisito legítimo. Una tarjeta promocional con tema oscuro en una página clara requiere que diferentes partes del árbol de componentes usen distintos temas simultáneamente. Esta es la razón principal para usar Context en lugar de estado a nivel de módulo.

¿Qué Hace a un Buen Sistema de Temas?

Antes de entrar en la implementación, establezcamos requisitos claros. Un sistema de temas de calidad para producción debe cumplir estos criterios:

Requisitos Funcionales

Requisito	Descripción
Múltiples modos	Soportar al menos temas claro y oscuro
Preferencia del sistema	Detectar la preferencia de esquema de color del SO
Anulación del usuario	Permitir a los usuarios elegir su tema preferido
Persistencia	Recordar la elección del usuario entre sesiones
Sincronización en tiempo real	Responder cuando cambia la preferencia del sistema
Acceso fácil al componente	API simple para que cualquier componente lea el tema

Requisitos de Experiencia de Usuario

Requisito	Descripción
Sin destello	La página carga con el tema correcto de inmediato
Transiciones suaves	Los cambios de tema se animan con fluidez
Consistente	Todos los componentes reflejan el tema simultáneamente
Accesible	Los controles de tema tienen atributos ARIA apropiados

Requisitos de Experiencia de Desarrollo

Requisito	Descripción
Type-safe	Soporte completo de TypeScript con inferencia
Encapsulado	Detalles de implementación ocultos para los consumidores
Composable	Funciona con variables CSS, Tailwind o acceso directo
Compatible SSR	Funciona con la renderización del servidor de SvelteKit

Con estos requisitos en mente, diseñemos nuestra solución.

Descripción General de la Arquitectura de Temas

La clave: CSS maneja todas las definiciones de color y el cambio. El único trabajo de JavaScript es establecer el atributo data-theme. Esto es más simple, más rápido y lo que usan todas las bibliotecas en producción.

El Modelo de Tres Modos

La mayoría de las aplicaciones necesitan tres configuraciones de tema: Claro (usar siempre el tema claro), Oscuro (usar siempre el tema oscuro) y Sistema (seguir la preferencia del sistema operativo).

Los componentes nunca manejan el caso 'system' por sí mismos—siempre reciben un 'light' o 'dark' definitivo.

CSS: La Única Fuente de Verdad

Define todos los colores del tema en tu CSS global. Este es el único lugar donde se definen los colores:

/* src/app.css */

/* Light theme (default) */
:root {
	--color-background: #ffffff;
	--color-surface: #f8fafc;
	--color-surface-hover: #f1f5f9;
	--color-foreground: #0f172a;
	--color-foreground-muted: #475569;
	--color-foreground-subtle: #94a3b8;
	--color-primary: #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-primary-foreground: #ffffff;
	--color-success: #16a34a;
	--color-warning: #ca8a04;
	--color-error: #dc2626;
	--color-info: #0284c7;
	--color-border: #e2e8f0;
	--color-border-focus: #3b82f6;
	--color-shadow: rgba(0, 0, 0, 0.1);
}

/* Dark theme */
:root[data-theme='dark'] {
	--color-background: #0f172a;
	--color-surface: #1e293b;
	--color-surface-hover: #334155;
	--color-foreground: #f8fafc;
	--color-foreground-muted: #cbd5e1;
	--color-foreground-subtle: #64748b;
	--color-primary: #3b82f6;
	--color-primary-hover: #60a5fa;
	--color-primary-foreground: #ffffff;
	--color-success: #22c55e;
	--color-warning: #eab308;
	--color-error: #ef4444;
	--color-info: #0ea5e9;
	--color-border: #334155;
	--color-border-focus: #60a5fa;
	--color-shadow: rgba(0, 0, 0, 0.4);
}

/* Base styles */
html,
body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family:
		system-ui,
		-apple-system,
		sans-serif;
	line-height: 1.5;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

Única fuente de verdad — Colores definidos una sola vez, sin duplicación en objetos TypeScript.

Rendimiento nativo del navegador — El navegador maneja el cambio de variables CSS de forma nativa—sin bucles JavaScript ni llamadas a setProperty.

Amigable con DevTools — Ve todas las variables en el panel Styles, fácil de depurar.

Funciona antes de JavaScript — Con SSR adecuado, los temas funcionan incluso si JS falla al cargar.

Cuándo SE Necesitan Propiedades CSS Basadas en JavaScript

El enfoque CSS-first funciona para el 95% de las aplicaciones. Sin embargo, hay casos legítimos donde necesitas que JavaScript establezca propiedades personalizadas CSS de forma dinámica:

Caso de Uso	Por Qué Se Necesita JavaScript
Colores personalizables por el usuario	Selector de color donde los usuarios eligen su propia paleta—los colores no se conocen en tiempo de compilación
Temas basados en API	Colores obtenidos de base de datos, CMS o sistema de gestión de marca
Computación en tiempo de ejecución	Generación de tintes, sombras o escalas de color programáticamente (p. ej., `chroma.js`)
Integración con terceros	Bibliotecas que necesitan valores de color en JS (Chart.js, D3, Canvas APIs)
Productos white-label	Aplicaciones SaaS donde cada inquilino tiene su marca personalizada cargada en tiempo de ejecución

Si los colores se conocen en tiempo de compilación → Defínelos en CSS.

Si los colores se determinan en tiempo de ejecución → Usa JavaScript para establecerlos.

La mayoría de las aplicaciones tienen paletas de colores estáticas, por lo que CSS-first es la opción predeterminada.

Para implementaciones detalladas de cada caso de uso—incluyendo selectores de color, temas basados en API, generación de paletas con Chroma.js, integración con Chart.js y patrones SaaS white-label—consulta el artículo dedicado: Personalización Dinámica de Temas: Propiedades CSS en Tiempo de Ejecución.

Construyendo el Theme Context

Ahora construyamos el context. Observa lo simple que es—JavaScript solo gestiona el estado y establece el atributo data-theme:

// src/lib/theme/types.ts

/** User-facing theme options */
export type ThemePreference = 'light' | 'dark' | 'system'

/** Actual rendered theme after resolving 'system' */
export type ResolvedTheme = 'light' | 'dark'

/** Theme context shape exposed to consumers */
export interface ThemeContext {
	readonly mode: ResolvedTheme
	readonly preference: ThemePreference
	readonly isDark: boolean
	readonly isLight: boolean
	readonly isSystem: boolean
	setPreference: (theme: ThemePreference) => void
	toggle: () => void
	reset: () => void
}

// src/lib/theme/theme-context.svelte.ts

import { setContext, getContext, hasContext } from 'svelte'
import { browser } from '$app/environment'
import type { ThemePreference, ResolvedTheme, ThemeContext } from './types.js'

const THEME_KEY = Symbol('theme')
const STORAGE_KEY = 'theme-preference'
const COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year

function getSystemPreference(): ResolvedTheme {
	if (!browser) return 'light'
	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}

function loadSavedPreference(): ThemePreference | null {
	if (!browser) return null
	const saved = localStorage.getItem(STORAGE_KEY)
	if (saved === 'light' || saved === 'dark' || saved === 'system') {
		return saved
	}
	return null
}

interface CreateThemeOptions {
	/** Force a specific theme (for nested overrides) */
	forceTheme?: ResolvedTheme
}

/**
 * Creates the theme context. Call once in root layout,
 * or nested for local theme overrides.
 */
export function createThemeContext(options: CreateThemeOptions = {}): ThemeContext {
	const { forceTheme } = options

	// State
	let systemMode = $state<ResolvedTheme>(getSystemPreference())
	let preference = $state<ThemePreference>(loadSavedPreference() ?? 'system')

	// Derived values
	let mode = $derived.by<ResolvedTheme>(() => {
		if (forceTheme) return forceTheme
		if (preference === 'system') return systemMode
		return preference
	})

	let isDark = $derived(mode === 'dark')
	let isLight = $derived(mode === 'light')
	let isSystem = $derived(preference === 'system')

	// Effect: Listen for system preference changes
	$effect(() => {
		if (!browser) return

		const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

		function handleChange(event: MediaQueryListEvent) {
			systemMode = event.matches ? 'dark' : 'light'
		}

		systemMode = mediaQuery.matches ? 'dark' : 'light'
		mediaQuery.addEventListener('change', handleChange)

		return () => mediaQuery.removeEventListener('change', handleChange)
	})

	// Effect: Apply theme (skip for nested providers)
	$effect(() => {
		if (!browser || forceTheme) return

		// This is ALL JavaScript needs to do!
		document.documentElement.dataset.theme = mode
		document.documentElement.style.colorScheme = mode
	})

	// Effect: Persist preference (skip for nested providers)
	$effect(() => {
		if (!browser || forceTheme) return

		localStorage.setItem(STORAGE_KEY, preference)
		document.cookie = `${STORAGE_KEY}=${preference};path=/;max-age=${COOKIE_MAX_AGE};SameSite=Lax`
	})

	// Effect: Update meta theme-color for mobile browsers
	$effect(() => {
		if (!browser || forceTheme) return

		let meta = document.querySelector('meta[name="theme-color"]')
		if (!meta) {
			meta = document.createElement('meta')
			meta.setAttribute('name', 'theme-color')
			document.head.appendChild(meta)
		}

		// Read the CSS variable value
		const bg = getComputedStyle(document.documentElement)
			.getPropertyValue('--color-background')
			.trim()
		meta.setAttribute('content', bg)
	})

	// Build context with getters for reactivity
	const context: ThemeContext = {
		get mode() {
			return mode
		},
		get preference() {
			return preference
		},
		get isDark() {
			return isDark
		},
		get isLight() {
			return isLight
		},
		get isSystem() {
			return isSystem
		},

		setPreference(pref: ThemePreference) {
			preference = pref
		},

		toggle() {
			if (preference === 'system') {
				preference = mode === 'dark' ? 'light' : 'dark'
			} else {
				preference = preference === 'dark' ? 'light' : 'dark'
			}
		},

		reset() {
			preference = 'system'
		}
	}

	return setContext(THEME_KEY, context)
}

export function getThemeContext(): ThemeContext {
	if (!hasContext(THEME_KEY)) {
		throw new Error('Theme context not found. Wrap your app in ThemeProvider.')
	}
	return getContext(THEME_KEY)
}

export function hasThemeContext(): boolean {
	return hasContext(THEME_KEY)
}

Observa lo que no está aquí:

No hay tipo ThemeColors
No hay objetos lightColors / darkColors
No hay función applyCSSProperties
No hay bucles estableciendo propiedades CSS

JavaScript simplemente establece data-theme y CSS maneja todo lo demás.

Creando el Componente Provider

<!-- src/lib/theme/ThemeProvider.svelte -->
<script lang="ts">
	import { createThemeContext } from './theme-context.svelte.js'
	import type { ResolvedTheme } from './types.js'
	import type { Snippet } from 'svelte'

	interface Props {
		/** Force a specific theme (for nested overrides) */
		forceTheme?: ResolvedTheme
		children: Snippet
	}

	let { forceTheme, children }: Props = $props()

	const theme = createThemeContext({ forceTheme })
</script>

<!-- For nested providers, set data-theme on the wrapper -->
{#if forceTheme}
	<div class="theme-scope" data-theme={theme.mode}>
		{@render children()}
	</div>
{:else}
	{@render children()}
{/if}

<style>
	.theme-scope {
		background-color: var(--color-background);
		color: var(--color-foreground);
		transition:
			background-color 0.3s ease,
			color 0.3s ease;
	}
</style>

Usando el Provider

<!-- src/routes/+layout.svelte -->
<script>
	import ThemeProvider from '$lib/theme/ThemeProvider.svelte'
	import '../app.css'

	let { children } = $props()
</script>

<ThemeProvider>
	{@render children()}
</ThemeProvider>

Anulaciones de Tema Anidadas

Esta es la razón principal para usar Context en lugar de estado a nivel de módulo. El ámbito de Context permite providers anidados:

<!-- src/routes/+page.svelte -->
<script>
	import ThemeProvider from '$lib/theme/ThemeProvider.svelte'
</script>

<!-- Page uses global theme (light) -->
<div class="page">
	<h1>Welcome</h1>

	<!-- This section forces dark theme -->
	<ThemeProvider forceTheme="dark">
		<section class="promo-card">
			<h2>Featured Content</h2>
			<p>This card is always dark, even on a light page.</p>
		</section>
	</ThemeProvider>

	<!-- This follows the page theme -->
	<section class="regular-card">
		<h2>Regular Content</h2>
		<p>This card follows the page theme.</p>
	</section>
</div>

<style>
	.promo-card,
	.regular-card {
		background-color: var(--color-surface);
		color: var(--color-foreground);
		border: 1px solid var(--color-border);
		padding: 1.5rem;
		border-radius: 12px;
		margin: 1rem 0;
	}
</style>

El ThemeProvider anidado establece data-theme="dark" en su div contenedor. Las propiedades personalizadas CSS se propagan en cascada, por lo que todo lo que esté dentro usa colores oscuros mientras que todo lo que esté fuera permanece claro.

Previniendo el Destello del Tema Incorrecto

En el servidor, no tenemos localStorage ni matchMedia. El tema destellará mientras se corrige durante la hidratación. Para solucionarlo, podemos agregar un script inline en el encabezado de app.html que se ejecute antes de que la página se renderice, estableciendo el tema correcto de inmediato:

<!-- src/app.html -->
<!doctype html>
<html lang="en" data-theme="">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<!-- CRITICAL: Runs before page renders -->
		<script>
			;(function () {
				try {
					const stored = localStorage.getItem('theme-preference')
					const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches

					let theme
					if (stored === 'dark' || stored === 'light') {
						theme = stored
					} else {
						theme = systemDark ? 'dark' : 'light'
					}

					document.documentElement.dataset.theme = theme
					document.documentElement.style.colorScheme = theme
				} catch (e) {
					// localStorage might be blocked
				}
			})()
		</script>

		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

Debido a que este script se ejecuta de forma síncrona antes de que la página pinte cualquier cosa, los usuarios verán el tema correcto de inmediato sin ningún destello.

Opcional: SSR Basado en Cookies

Hay una advertencia: si un usuario tiene JavaScript deshabilitado, el script inline no se ejecutará y el tema tendrá como valor predeterminado el claro. Para soportar este caso extremo, podemos leer el tema desde una cookie en el servidor e inyectarlo en el HTML renderizado:

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit'

export const handle: Handle = async ({ event, resolve }) => {
	const theme = event.cookies.get('theme-preference')

	if (!theme || !['light', 'dark'].includes(theme)) {
		return resolve(event)
	}

	return resolve(event, {
		transformPageChunk: ({ html }) => {
			return html.replace('data-theme=""', `data-theme="${theme}"`)
		}
	})
}

Ahora incluso los usuarios sin JavaScript verán su tema preferido en el primer renderizado.

Construyendo Controles de Tema

Botón de Alternancia Simple

<!-- src/lib/theme/ThemeToggle.svelte -->
<script lang="ts">
	import { getThemeContext } from './theme-context.svelte.js'

	const theme = getThemeContext()

	let label = $derived(theme.isDark ? 'Switch to light mode' : 'Switch to dark mode')
</script>

<button type="button" onclick={() => theme.toggle()} class="theme-toggle" aria-label={label}>
	{#if theme.isDark}
		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
			<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
		</svg>
	{:else}
		<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
			<circle cx="12" cy="12" r="5" />
			<line x1="12" y1="1" x2="12" y2="3" />
			<line x1="12" y1="21" x2="12" y2="23" />
			<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
			<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
			<line x1="1" y1="12" x2="3" y2="12" />
			<line x1="21" y1="12" x2="23" y2="12" />
			<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
			<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
		</svg>
	{/if}
</button>

<style>
	.theme-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: var(--color-surface);
		color: var(--color-foreground);
		cursor: pointer;
		transition:
			background-color 0.2s,
			transform 0.2s;
	}

	.theme-toggle:hover {
		background-color: var(--color-surface-hover);
		transform: scale(1.05);
	}

	.theme-toggle:focus-visible {
		outline: 2px solid var(--color-border-focus);
		outline-offset: 2px;
	}

	.theme-toggle svg {
		width: 22px;
		height: 22px;
	}
</style>

Selector de Tres Opciones

<!-- src/lib/theme/ThemeSelector.svelte -->
<script lang="ts">
	import { getThemeContext } from './theme-context.svelte.js'
	import type { ThemePreference } from './types.js'

	const theme = getThemeContext()

	const options: { value: ThemePreference; label: string; icon: string }[] = [
		{ value: 'light', label: 'Light', icon: '☀️' },
		{ value: 'dark', label: 'Dark', icon: '🌙' },
		{ value: 'system', label: 'System', icon: '💻' }
	]
</script>

<div class="theme-selector" role="radiogroup" aria-label="Theme selection">
	{#each options as option (option.value)}
		<button
			type="button"
			role="radio"
			aria-checked={theme.preference === option.value}
			class="option"
			class:selected={theme.preference === option.value}
			onclick={() => theme.setPreference(option.value)}
		>
			<span class="icon">{option.icon}</span>
			<span class="label">{option.label}</span>
		</button>
	{/each}
</div>

{#if theme.isSystem}
	<p class="system-note">
		Currently using <strong>{theme.mode}</strong> based on system settings.
	</p>
{/if}

<style>
	.theme-selector {
		display: inline-flex;
		gap: 4px;
		padding: 4px;
		border-radius: 12px;
		background: var(--color-surface);
	}

	.option {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		border: none;
		border-radius: 8px;
		background: transparent;
		color: var(--color-foreground);
		font-size: 14px;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.option:hover:not(.selected) {
		background: var(--color-surface-hover);
	}

	.option.selected {
		background: var(--color-background);
		box-shadow: 0 1px 3px var(--color-shadow);
	}

	.icon {
		font-size: 16px;
	}

	.system-note {
		margin-top: 8px;
		font-size: 12px;
		color: var(--color-foreground-muted);
	}
</style>

Usando Temas en Componentes

Método 1: Variables CSS (Recomendado)

La mayoría de los componentes deberían usar simplemente variables CSS—no se necesita importar contexto:

<!-- src/lib/components/Card.svelte -->
<script lang="ts">
	import type { Snippet } from 'svelte'

	interface Props {
		title: string
		children: Snippet
	}

	let { title, children }: Props = $props()
</script>

<article class="card">
	<h2>{title}</h2>
	<div class="content">{@render children()}</div>
</article>

<style>
	.card {
		background-color: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: 12px;
		padding: 1.5rem;
		transition:
			background-color 0.3s,
			border-color 0.3s;
	}

	.card:hover {
		background-color: var(--color-surface-hover);
	}

	h2 {
		margin: 0 0 1rem;
		color: var(--color-foreground);
	}

	.content {
		color: var(--color-foreground-muted);
	}
</style>

Este componente se adapta automáticamente a cualquier tema sin necesidad de importar contexto.

Método 2: Contexto para Acceso Programático

Usa el contexto solo cuando necesites acceso programático (canvas, SVG, bibliotecas de terceros):

<!-- src/lib/components/Chart.svelte -->
<script lang="ts">
	import { getThemeContext } from '$lib/theme/theme-context.svelte.js'

	const theme = getThemeContext()

	let { data }: { data: number[] } = $props()
	let canvas = $state<HTMLCanvasElement | null>(null)

	$effect(() => {
		if (!canvas) return
		const ctx = canvas.getContext('2d')
		if (!ctx) return

		// Read CSS variables for colors
		const styles = getComputedStyle(document.documentElement)
		const surface = styles.getPropertyValue('--color-surface').trim()
		const primary = styles.getPropertyValue('--color-primary').trim()

		ctx.fillStyle = surface
		ctx.fillRect(0, 0, canvas.width, canvas.height)

		ctx.strokeStyle = primary
		ctx.lineWidth = 2
		ctx.beginPath()
		data.forEach((point, i) => {
			const x = (i / data.length) * canvas.width
			const y = canvas.height - (point / 100) * canvas.height
			if (i === 0) ctx.moveTo(x, y)
			else ctx.lineTo(x, y)
		})
		ctx.stroke()
	})
</script>

<canvas bind:this={canvas} width="400" height="200"></canvas>

Errores Comunes

1. Establecer propiedades CSS mediante JavaScript

En el 95% de los casos, establecer propiedades CSS mediante JavaScript es innecesario e ineficiente. Verás cuándo usarlo para ese 5% en el siguiente artículo.

// Don't do this - let CSS handle it
root.style.setProperty('--color-background', colors.background)
root.style.setProperty('--color-surface', colors.surface)
// ... 15 more lines

Simplemente establece el atributo directamente:

// CSS selectors handle the rest
document.documentElement.dataset.theme = mode

2. Importar contexto en cada componente

Rara vez necesitas acceso programático a los datos del tema.

<script>
	// Don't do this everywhere
	const theme = getThemeContext()
	const bg = theme.isDark ? '#0f172a' : '#ffffff'
</script>

Usa variables CSS en su lugar:

<style>
	.card {
		background: var(--color-surface);
	}
</style>

3. Duplicar colores en TypeScript

No mantengas dos fuentes de verdad.

export const darkColors = {
	background: '#0f172a'
	// ... same colors as CSS
}

CSS debe ser tu única fuente de verdad.

:root[data-theme='dark'] {
	--color-background: #0f172a;
}

Estructura del Proyecto

src/
├── lib/
│   └── theme/
│       ├── types.ts                  # TypeScript interfaces (minimal)
│       ├── theme-context.svelte.ts   # Context management
│       ├── ThemeProvider.svelte      # Provider component
│       ├── ThemeToggle.svelte        # Toggle button
│       ├── ThemeSelector.svelte      # Three-way selector
│       └── index.ts                  # Public exports
├── routes/
│   └── +layout.svelte                # Wraps app in ThemeProvider
├── hooks.server.ts                   # Optional: Cookie-based SSR
├── app.html                          # Flash prevention script
└── app.css                           # ALL theme colors defined here

Consideraciones de Rendimiento

El enfoque CSS-first es altamente eficiente:

Optimización nativa del navegador — El cambio de variables CSS es gestionado internamente por el navegador, no por JavaScript
Sin bucles JavaScript — No iteramos sobre colores ni llamamos a setProperty
Un único reflow — Establecer data-theme desencadena un solo recálculo de estilos
Amigable con DevTools — Fácil de inspeccionar y depurar en el panel de Estilos

La mayoría de los componentes deberían usar variables CSS exclusivamente. Reserva getThemeContext() para componentes que genuinamente necesiten acceso programático.

Cuándo NO Usar Contexto

El contexto añade complejidad. Considera alternativas más simples:

Escenario	Recomendación
Tema global únicamente (sin anidamiento de temas)	Usa el patrón de hook useTheme
Tema estático (sin preferencia del usuario)	Solo variables CSS, sin JavaScript
Biblioteca de componentes	Expón la personalización de temas mediante variables CSS, no contexto
Micro-frontends	Usa shadow DOM o contención CSS

Usa Context cuando específicamente necesites anidamiento de temas—esa es su capacidad única.

Conclusión

Un sistema de temas en producción con Context es más simple de lo que puede parecer cuando sigues el enfoque CSS-first:

CSS es la única fuente de verdad — Todos los colores definidos en app.css usando selectores :root[data-theme]
JavaScript solo establece un atributo — document.documentElement.dataset.theme = mode
Los componentes usan variables CSS — No se necesitan importaciones de contexto para la mayoría de los componentes
Context permite anidamiento de temas — La razón principal para usar Context sobre estado a nivel de módulo

El resultado es menos código, mejor rendimiento y una depuración más sencilla.

Puntos Clave

CSS gestiona los colores — Define los temas con selectores :root[data-theme], no con objetos JavaScript.
JavaScript establece un solo atributo — data-theme es todo lo que necesitas. Sin bucles de setProperty.
La mayoría de los componentes no necesitan contexto — Simplemente usa var(--color-surface) en CSS.
Context es para anidamiento de temas — Ese es su valor único frente al estado a nivel de módulo.
Previene el flash con un script inline — Se ejecuta antes del renderizado y establece data-theme de inmediato.
Los getters mantienen la reactividad — Retorna get mode() en lugar de mode desde el contexto.

Lecturas Adicionales

Documentación Oficial

Svelte Context — Guía oficial de la API de context
CSS Custom Properties — Referencia de MDN
prefers-color-scheme — Detección del tema del sistema