Appearance

Theme & color mode

Switch light, dark, or system mode for this site. Component previews below use your current tokens. For the 22 accent palettes (neutral, slate, blue, …), import a different .css file from @codefast/ui in your app—this site’s components section includes a theme picker for those.

Open components

Color mode

Controls whether this documentation site uses light or dark surfaces (and whether that follows the OS when set to system).

Current state

Values from useTheme().

Preferencesystem

Resolveddark

Modes

lightdarksystem

What you get

Behavior provided by @codefast/theme in this app.

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 enabled in the root shell to avoid jarring transitions while swapping modes.

Transitions while changing mode

While the theme switches, CSS transitions are briefly suppressed so colors snap consistently; they work again for hover and other interactions afterward.

Configured in the app shell

disableTransitionOnChange is set on ThemeProvider in the root route. Toggle light/dark above—the samples below should update without a long cross-fade.

Samples with transitions

Card

Hover for scale/shadow; mode changes should still feel instant.

Badge

Long transition box

Uses a 700ms transition for hover; appearance mode switches should not animate through intermediate colors.

Try it

Use the mode buttons at the top of the page.
Notice UI colors update immediately without a slow blend.
Hover the samples—transitions should behave normally again.

Component preview

Common primitives using current semantic tokens.

Buttons

Badges

DefaultSecondaryDestructiveOutline

Alert

Info

Alerts, cards, and borders follow background, foreground, and related tokens.

Cards

Surface

Card background and radius

Uses theme card tokens.

Typography

Muted vs foreground

Body text uses muted foreground.

Borders

Border token

Outlines respect the active mode.

How it fits together

@codefast/theme keeps the appearance preference and applies the right class on the document. Tailwind (dark: variants and CSS variables from the UI preset) does the rest. Accent palettes are separate: choose a theme stylesheet from the package, as in the install snippet on the home page.