Theme Components

Components for managing application appearance. Support light, dark, and system-preference themes with automatic persistence and system theme detection.

Installation

npm install @happyvertical/smrt-svelte

import { SelectInput } from '@happyvertical/smrt-svelte';
import { theme, applyTheme } from '$lib/stores/theme';

Components

ThemeSwitcher

SelectInput-based theme selector supporting light, dark, and system themes.

Features

System Detection

Automatically respects the user's OS-level theme preference via prefers-color-scheme.

Persistent Storage

Theme preference is saved to localStorage and restored on page load.

CSS Variables

Uses CSS custom properties for seamless integration with any component.

No Flash

Theme is applied before render to prevent flash of incorrect theme.

Quick Start

Add the theme store to your root layout to apply the theme on mount:

<script>
  import { onMount } from 'svelte';
  import { theme, applyTheme } from '$lib/stores/theme';

  onMount(() => {
    // Apply saved theme on mount
    applyTheme($theme);

    // Listen for system theme changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = () => {
      if ($theme === 'system') applyTheme('system');
    };
    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  });
</script>