Skip to main content

​
Usage

Initialize the theme system when your application loads. The function applies themes in priority order: stored theme from localStorage, system preference (if enabled), or default theme. 
import { initTheme } from '@alex.radulescu/styled-static';

// Basic usage
initTheme();

// With system preference detection
initTheme({ useSystemPreference: true });

// Full configuration
initTheme({
  defaultTheme: 'light',
  storageKey: 'my-app-theme',
  useSystemPreference: true,
});

​
Signature

function initTheme(options?: InitThemeOptions): string

​
Parameters

​
options
InitThemeOptions
default:"{}"
Configuration options for theme initialization

​
Returns

​
theme
string
The theme that was applied

​
Behavior

The function applies themes in the following priority order:
  1. Stored theme from localStorage - Checks the configured storageKey for a saved theme preference
  2. System preference - If useSystemPreference is true, checks the prefers-color-scheme media query
  3. Default theme - Falls back to the defaultTheme option
The selected theme is set on the document element using the specified attribute (default: data-theme).

​
Examples

​
Basic initialization

import { initTheme } from '@alex.radulescu/styled-static';

// Initialize on app load
initTheme({ defaultTheme: 'light', useSystemPreference: true });

​
Custom storage key

initTheme({
  defaultTheme: 'light',
  storageKey: 'my-app-theme',
  useSystemPreference: true,
});

​
Custom attribute

initTheme({
  defaultTheme: 'light',
  attribute: 'data-color-mode',
});

Build docs developers (and LLMs) love

Get started for freeTalk to us