--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;

Real-world brand palettes (Apple, GitHub, Vercel, Slack, Discord).

Apple

apple

Apple Light

TKapple

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.

GitHub

github

GitHub Light

TKgithub

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.

Vercel

vercel

Vercel Light

TKvercel

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.

Slack

slack

Slack Light

TKslack

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.

Discord

discord

Discord Light

TKdiscord

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 { getBrandPresets } from "@theme-kit/core";
2
3// Apple, GitHub, Vercel, Slack, Discord — light + dark each
4const themes = getBrandPresets();
5
6const github = themes.filter((t) => t.meta?.family === "github");
7createThemeRuntime({ themes: github, defaultTheme: "github-light" });

Learn how to define your own themes →