Foundation and layout

ThemeScript

Applies the saved theme before first paint.

Live example

<ThemeScript />

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

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

/**
 * Complete ThemeScript parameter reference.
 * @param storageKey
 *   type: string
 *   default: "cf-theme"
 *   example: "cf-theme"
 * @param nonce
 *   type: string
 *   default: —
 *   example: nonce
 */
export function ThemeScriptExample() {
  return (
    <ThemeScript nonce={nonce} />
  );
}

Svelte

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

  // Complete ThemeScript parameter reference.
  // storageKey
  //   type: string
  //   default: "cf-theme"
  //   example: "cf-theme"
  // nonce
  //   type: string
  //   default: —
  //   example: nonce
</script>

<ThemeScript nonce={nonce} />

HTML

<!--
  Complete ThemeScript parameter reference.
  storageKey
    type: string
    default: "cf-theme"
    example: "cf-theme"
  nonce
    type: string
    default: —
    example: nonce
-->
<script>/* getThemeScript() */</script>

Contract

CSS selector	`html[data-theme]`
Adapters	Native · React · Svelte
Primary props	storageKey · nonce
Documented states	before paint · storage unavailable
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

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

Parameter	Type	Default	Adapters	Example	Description
`storageKey`	`string`	`"cf-theme"`	React · Svelte · HTML	`"cf-theme"`	Browser storage key shared by ThemeScript and ThemeProvider.
`nonce`	`string`	`—`	React · Svelte · HTML	`nonce`	CSP nonce forwarded to the inline before-paint script.