Skip to content

← All components

Foundation and layout

ThemeToggle

Accessible three-way theme preference control.

Live example

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 { ThemeToggle } from "@cofob/design-system-react";

/**
 * Complete ThemeToggle parameter reference.
 * @param cycle
 *   type: readonly ThemePreference[]
 *   default: ["system", "light", "dark"]
 *   example: ["system", "light", "dark"]
 * @param labels
 *   type: Partial<Record<string, string>>
 *   default: —
 *   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
 * @param button attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ThemeToggleExample() {
  return (
    <ThemeToggle />
  );
}

Svelte

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

  // Complete ThemeToggle parameter reference.
  // preference
  //   type: "light" | "dark" | "system"
  //   default: context / bindable
  //   example: "dark"
  // cycle
  //   type: readonly ThemePreference[]
  //   default: ["system", "light", "dark"]
  //   example: ["system", "light", "dark"]
  // labels
  //   type: Partial<Record<string, string>>
  //   default: —
  //   example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  // showLabel
  //   type: boolean
  //   default: true
  //   example: true
  // onPreferenceChange
  //   type: (preference: ThemePreference) => void
  //   default: —
  //   example: {handlePreferenceChange}
  // button attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<ThemeToggle />

HTML

html
<!--
  Complete ThemeToggle parameter reference.
  preference
    type: "light" | "dark" | "system"
    default: context / bindable
    example: "dark"
  cycle
    type: readonly ThemePreference[]
    default: ["system", "light", "dark"]
    example: ["system", "light", "dark"]
  labels
    type: Partial<Record<string, string>>
    default: —
    example: {{ system: "System theme", light: "Light theme", dark: "Dark theme" }}
  showLabel
    type: boolean
    default: true
    example: true
  button attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<button class="cf-theme-toggle" data-cf-theme-toggle>Theme</button>

<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 / bindableSvelte · HTML"dark"Controlled theme preference.
cyclereadonly ThemePreference[]["system", "light", "dark"]React · Svelte · HTML["system", "light", "dark"]Order used when the toggle advances through theme preferences.
labelsPartial<Record<string, string>>—React · Svelte · HTML{{ system: "System theme", light: "Light theme", dark: "Dark theme" }}Localized visible and accessible labels.
showLabelbooleantrueSvelte · HTMLtrueShows the current preference text beside the icon.
onPreferenceChange(preference: ThemePreference) => void—Svelte{handlePreferenceChange}Runs after the user selects a new theme preference.
button attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.