Theme

Installation

import { ThemeProvider, ThemeScript, ThemeToggle, useTheme } from "@aspyn-io/kit";

Setup (Next.js)

ThemeProvider manages both axes — theme (light/dark/system) and brand (the visual identity) — with persistence. ThemeScript prevents a flash of the wrong theme or brand. Developers write zero theme code.

Two axes: theme (mode) and brand

theme is light/dark/system; brand is the palette (graphite, ember, …). Both come from one hook, both persist, both restore before paint.

Bring your own theme

A brand is just a `[data-brand]` CSS block overriding the --as-* tokens, then registered with the provider so it shows up in switchers.

Setup (Vite)

Notes

• theme defaults to system (follows the OS live) and persists under "aspyn-theme"; brand defaults to aspyn and persists under "aspyn-brand". Both keys are configurable (storageKey / brandStorageKey).
• First-party brands: graphite (default), ember, ocean, slate, violet, rose. Plus two corporate-brand showcases — aptive, google — real identities rebuilt on the token system. Each is `@import "@aspyn-io/tokens/themes/<name>"`. Custom brands need no import beyond your own CSS block.
• The default graphite brand is the bare :root, so it carries no data-brand attribute; every other brand sets data-brand on <html>.
• This very page is powered by these components: try the theme toggle and brand switcher in the header.