Appearance

Theme & color mode

@codefast/theme persists light, dark, or system, aligns the first paint with SSR, and exposes useTheme() everywhere in your app. Wire TanStack Start with the integration panel further down.

TanStack Start guide Install @codefast/theme

Live

@codefast/theme

dark

Resolved appearance

Preferencesystem

Continue to appearance controls and samples.

Install @codefast/theme

Persisted light, dark, and system appearance, SSR-friendly first paint, and an optional TanStack Start adapter — see the integration guide below for wiring.

pnpm add @codefast/theme

Controls

Appearance & state

Exercise the same light/dark/system flow your users get from @codefast/theme: document class, cookie persistence, and live useTheme() values.

Color mode

Light, dark, or system (follow the OS). Updates the document class so Tailwind dark: variants line up.

Mode change vs hover motion

A new appearance applies to surfaces right away. Hover transitions on these samples are independent—use them to confirm both behaviors.

Card

Hover scales; mode change snaps colors.

Badge

Extended samples ↓

Current state

Values from useTheme() in @codefast/theme.

Preferencesystem

Resolveddark

Modes

lightdarksystem

Scope of this package

@codefast/theme is headless: no widgets, no CSS preset. This docs site also uses @codefast/ui for layout and demos — brand accent files live there, not here.

Appearance mode

Stored preference + resolved light/dark. Handled by @codefast/theme (cookie, SSR script, tab sync).

Brand colors (@codefast/ui)

Accent CSS (e.g. neutral.css, blue.css) ships with the UI kit. Orthogonal to light/dark/system from @codefast/theme.

TanStack Start + @codefast/theme

Cookie-backed light, dark, and system for TanStack Start: SSR reads the preference, <html> matches the first paint, and any route can use useTheme().

Open the panel below for install, ordered steps, copy-paste __root.tsx, and a toggle example.

Design tokens

Semantic colors

On this site, semantic colors come from the docs CSS (e.g. @codefast/ui palettes). Switching mode here shows how @codefast/theme drives light/dark while those variables update underneath.

Background

--background

Foreground

--foreground

Primary

--primary

Primary text

--primary-foreground

On primary surfaces

Muted

--muted

Muted text

--muted-foreground

Accent

--accent

Destructive

--destructive

Border

--border

Card

--card

Behavior

What this app wires for you

The same defaults ship with the TanStack Start adapter: cookie persistence, SSR script, and smooth handoff to Tailwind tokens.

Light, dark, and system (follow OS) modes.

Persisted preference (cookie) with SSR-friendly script to limit flash.

Tab sync and sensible color-scheme on the document.

disableTransitionOnChange on ThemeProvider to avoid long cross-fades when swapping modes.

Motion

Transitions & mode switches

Larger samples and a slow-hover panel. Use them to confirm appearance updates apply immediately while hover-driven motion on controls still behaves normally.

Expected behavior

While the document appearance changes, transition suppression avoids blending through unintended intermediate colors. Hover and focus transitions on UI components are unchanged.

Card

Hover for scale and shadow; mode changes stay instant.

Badge

Long hover transition

700ms on hover; theme toggles should never “fade” through odd in-between colors.

Optional context

@codefast/ui samples

Only for this documentation site: see how light/dark/system from @codefast/theme affects real components. The package itself stays headless.

Loading samples…

How it fits together

@codefast/theme keeps the preference and document class. Tailwind and the UI preset supply dark: and CSS variables. Accent palettes come from a stylesheet import—see the home page install snippet.