Skip to content

← All components

Foundation and layout

ThemeProvider

Supplies reactive light, dark, and system theme state.

Live example

Theme contextOne preference, resolved before paint.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { ThemeProvider } from "@cofob/design-system-react";

/**
 * Complete ThemeProvider parameter reference.
 * @param preference
 *   type: "light" | "dark" | "system"
 *   default: context / bindable
 *   example: "dark"
 * @param defaultPreference
 *   type: "light" | "dark" | "system"
 *   default: "system"
 *   example: "system"
 * @param onPreferenceChange
 *   type: (preference: ThemePreference) => void
 *   default: —
 *   example: {handlePreferenceChange}
 * @param storageKey
 *   type: string
 *   default: "cf-theme"
 *   example: "cf-theme"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function ThemeProviderExample() {
  return (
    <ThemeProvider><App /></ThemeProvider>
  );
}

Svelte

svelte
<script lang="ts">
  import { ThemeProvider } from "@cofob/design-system-svelte";

  // Complete ThemeProvider parameter reference.
  // preference
  //   type: "light" | "dark" | "system"
  //   default: context / bindable
  //   example: "dark"
  // defaultPreference
  //   type: "light" | "dark" | "system"
  //   default: "system"
  //   example: "system"
  // onPreferenceChange
  //   type: (preference: ThemePreference) => void
  //   default: —
  //   example: {handlePreferenceChange}
  // storageKey
  //   type: string
  //   default: "cf-theme"
  //   example: "cf-theme"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

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

HTML

html
<!--
  Complete ThemeProvider parameter reference.
  preference
    type: "light" | "dark" | "system"
    default: context / bindable
    example: "dark"
  defaultPreference
    type: "light" | "dark" | "system"
    default: "system"
    example: "system"
  onPreferenceChange
    type: (preference: ThemePreference) => void
    default: —
    example: {handlePreferenceChange}
  storageKey
    type: string
    default: "cf-theme"
    example: "cf-theme"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<html data-theme="dark" data-theme-preference="dark">…</html>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
preference"light" | "dark" | "system"context / bindableReact · Svelte · HTML"dark"Controlled theme preference.
defaultPreference"light" | "dark" | "system""system"React · Svelte · HTML"system"Initial preference for uncontrolled usage.
onPreferenceChange(preference: ThemePreference) => void—React · Svelte · HTML{handlePreferenceChange}Runs after the user selects a new theme preference.
storageKeystring"cf-theme"React · Svelte · HTML"cf-theme"Browser storage key shared by ThemeScript and ThemeProvider.
childrenReactNode | Svelte Snippet | child HTML—React · Svelte · HTMLchildren / snippet / child HTMLIdiomatic adapter composition content.