Themes and colors
One foundation. All your personality.
The idea is still yours.
Light, dark or system mode
KivoraProvider accepts colorMode="light", "dark" or "system". The resolved mode updates the document's dark class. Mount a top-level provider to prevent competing modes.
1<KivoraProvider colorMode="system">
2 {children}
3</KivoraProvider>Colors with meaning
Use bg-background, text-foreground, bg-primary and border-border. Names describe each color's role, so the interface can switch themes without changing every component.
The home page and documentation share the same variables: violet in light mode, lavender in dark mode, pink and sage green. The header controls let you try all four palettes.
1:root {
2 --color-primary: #6558e8;
3 --color-primary-foreground: #ffffff;
4 --color-background: #f7f8fc;
5 --color-foreground: #25262c;
6}
7
8.dark {
9 --color-primary: #a79bff;
10 --color-primary-foreground: #201a3b;
11 --color-background: #13141e;
12 --color-foreground: #f0eef7;
13}Give it your brand's colors
Customize token pairs: primary with primary-foreground, card with card-foreground, and so on. Check readability in hover, focus and disabled states.
Panels using portals may render under body. If you scope variables to a section, also configure the portal container or apply the palette at document level.
1.brand-rose {
2 --color-primary: #a03872;
3 --color-primary-foreground: #ffffff;
4 --color-secondary: #f7e0eb;
5 --color-secondary-foreground: #943564;
6}
7
8.brand-sage {
9 --color-primary: #287c60;
10 --color-primary-foreground: #ffffff;
11 --color-secondary: #e2eee5;
12 --color-secondary-foreground: #287c60;
13}CSS variables and the theme object
themeOverrides changes the object returned by useKivoraTheme but does not generate CSS variables automatically. If you consume both the theme object and CSS classes, keep the two representations aligned.
1"use client";
2import { useKivoraTheme } from "@kivora/nextjs";
3
4export function CurrentTheme() {
5 const { resolvedColorMode } = useKivoraTheme();
6 return <span>Current mode: {resolvedColorMode}</span>;
7}Your typography stays yours
Kivora does not require the typography used in these examples. This site keeps Geist and Geist Mono. Define font-family in your application and use typography components to organize the hierarchy.
Continue with Button or explore the web component catalog.