Components / Brand

ThemeToggle

Light/dark switch. Pair it with ThemeBootstrap in <head>: from one set of options it renders themeScript(), so the saved theme applies before first paint, and SavedPreferences, so it comes back on a page the browser draws from scratch, such as a 404. Every Somnia app uses the same storage key, so a choice carries across sites and explorer zones on one origin.

Extracted fromMarketing siteExplorer

Import

tsx

import { ThemeToggle, ThemeBootstrap, themeScript, THEME_KEY, SavedPreferences } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { ThemeToggle, ThemeBootstrap, themeScript, THEME_KEY, SavedPreferences } from "@somnia-chain/ui/next"

Examples

Icon and labelled

examples/theme-toggle/default.tsxShow code

tsx

import { ThemeToggle } from "@somnia-chain/ui"

export default function ThemeToggleExample() {
  return (
    <div className="flex items-center gap-3">
      <ThemeToggle />
      <ThemeToggle withLabel />
    </div>
  )
}

Props

themeScript(options)

Prop	Type	Default	Description
defaultTheme	"light" \| "dark"	"light"	Used when nothing is saved.
followSystem	boolean	false	Use the OS setting before the default.
storageKey	string	"somnia-theme"	localStorage key.
textSize	boolean \| { storageKey? }	false	Also apply the saved text size, as textSizeScript() does, in the same script. Without it the script is the theme's alone.

ThemeBootstrap

Prop	Type	Default	Description
...options	themeScript's options	—	Renders themeScript(options) inline and SavedPreferences with the same options. Render it once, in <head>; it draws nothing the viewer sees.

SavedPreferences

Prop	Type	Default	Description
...options	themeScript's options	—	Does on the client what themeScript(options) does before paint, for a page the browser draws from scratch (a 404 answered before anything streamed) or redraws after a failed hydration. Render it once in the root layout, with the options the layout's script has.