The nine signature light/dark families that ship with the library: oat, berry, mint, citrus, cocoa, plum, iris, sky and graphite. Click any card to apply that preset to this entire site — live, no reload.

See Brand Presets →

Applied now on this site

This page is themed by the live runtime — every card above calls setFamily() on this very page.

theme-kit-default-light · system · theme-kit

Resolved CSS variables

--theme-color-background: #fafbff;
--theme-color-foreground: #0d0f1f;
--theme-color-card: #ffffff;
--theme-color-cardForeground: #0d0f1f;
--theme-color-popover: #ffffff;
--theme-color-popoverForeground: #0d0f1f;
--theme-color-primary: #5b54e8;
--theme-color-primaryForeground: #ffffff;
--theme-color-secondary: #eef0fb;
--theme-color-secondaryForeground: #171a2e;
--theme-color-muted: #f2f3fb;
--theme-color-mutedForeground: #5a6172;
--theme-color-accent: #e8e6ff;
--theme-color-accentForeground: #4f46c9;
--theme-color-destructive: #ef4444;
--theme-color-destructiveForeground: #ffffff;
--theme-color-success: #16a34a;
--theme-color-successForeground: #ffffff;
--theme-color-border: #e4e6f2;
--theme-color-input: #e4e6f2;
--theme-color-ring: #5b54e8;
--theme-radius-lg: 12px;
--theme-code-background: #f6f7fc;
--theme-code-foreground: #0f172a;
--theme-code-comment: #6b7280;
--theme-code-keyword: #7c3aed;
--theme-code-string: #07865c;
--theme-code-number: #d97706;
--theme-code-function: #2563eb;
--theme-code-variable: #0f172a;
--theme-code-type: #db2777;
--theme-code-property: #0284c7;
--theme-code-operator: #7c3aed;
--theme-code-punctuation: #475569;
--theme-code-tag: #be185d;
--theme-code-attribute: #0284c7;
--theme-code-lineNumber: #9ca3af;
--theme-code-selection: rgba(91, 84, 232, 0.12);
--theme-code-highlight: rgba(91, 84, 232, 0.06);
--theme-code-gutter: #f6f7fc;
--theme-code-border: #e4e6f2;

Curated palettes from @theme-kit/core — the nine signature families.

Neutral

neutral

Light

TKDefault

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Oat

oat

Oat Light

TKoat

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Berry

berry

Berry Light

TKberry

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Mint

mint

Mint Light

TKmint

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Citrus

citrus

Citrus Light

TKcitrus

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Cocoa

cocoa

Cocoa Light

TKcocoa

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Plum

plum

Plum Light

TKplum

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Iris

iris

Iris Light

TKiris

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Sky

sky

Sky Light

TKsky

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Graphite

graphite

Graphite Light

TKgraphite

Ship theming, not themes

One runtime, every framework — swap light and dark with a single token update.

Get startedExplore

light

Snapshots every light/dark token pair of the family. Clicking applies setFamily() to this very page — live, no reload.

Use them in code

All presets come from @theme-kit/core. Grab what you need — no styling required.

1import { getPresetThemes } from "@theme-kit/core";
2
3// Default presets — nine families, light + dark
4const themes = getPresetThemes();
5
6// Restyle one family's tokens
7const custom = getPresetThemes({
8  plum: {
9    light: { tokens: { colors: { primary: "#6d28d9" } } },
10  },
11});

Learn how to define your own themes →