Theming

Bitsy keeps appearance focused on color, material, and tone. Light and dark mode switch through the same semantic token names, while appearance presets show how the foundation can shift without changing typography posture.

Theme switching stays simple

The distinction between system mode, explicit mode, and appearance presets should scan quickly.

System theme

By default, the foundation can follow prefers-color-scheme.

:root {
  color-scheme: light dark;
}

Explicit theme

Use data-bitsy-theme when a page or app needs to force a mode.

<html data-bitsy-theme="light">
<html data-bitsy-theme="dark">

Explicit light

Light theme

Surfaces, borders, text, and accents should stay readable without looking brittle.

Explicit dark

Dark theme

The same semantic roles should still read clearly after the values switch.

Appearances

Each appearance swaps palettes, the semantic mapping, fonts, and shape steps. The markup never changes.

Bitsy (default)

Evolved current look: warm stone grays, a warm ink primary, softer 12px corners, and a gentle lift.

Crisp

Cool grays, a violet brand, white cards on a light canvas, and tight 8px corners. Modeled on modern app UI kits.

Neutral

Zinc grays, near-black primary actions, 6px corners, and almost no shadow. Monochrome, utility-first feel.

Appearance tokens do not define typography posture

/* Recolor the default primary action and soften corners */
:root {
  --bitsy-brand-900: #1f3a5f;
  --bitsy-brand-700: #2f5180;
  --bitsy-radius-control: var(--bitsy-radius-2xl);
}

Appearance exploration should come from token changes in color, surface, radius, and shadow. Hierarchy and reading rhythm belong to the typography profile system.