THEME EDITOR

Make it yours

Start from a preset or three seed colours, fine-tune any token, check contrast and watch real components update. Export CSS variables, or use a preset directly with data-theme="midnight".

Acme Analytics

Revenue

$48.2k↑ 12.4%vs last week

Active users

3,214↑ 4.1%vs last week

Churn

1.8%↓ 0.6%vs last week

Weekly signups

Invite your team

Send weekly digest

Admin access

SolidSoftSuccessWarningDangerInfo

Storage · 68 GB of 100 GB68%

Muted text reads like this. Subtle text is for hints and timestamps.

Export

1/* Paste after @import "@kineticui/core/styles.css"; */
2:root, .dark {
3  --kn-background: #0a0a0b;
4  --kn-surface: #111112;
5  --kn-surface-raised: #181819;
6  --kn-surface-overlay: #1e1e1f;
7  --kn-border: #282829;
8  --kn-border-strong: #3b3b3c;
9  --kn-foreground: #f4f4f5;
10  --kn-muted: #a7a7a8;
11  --kn-subtle: #8d8d8e;
12  --kn-accent: #c6f432;
13  --kn-accent-foreground: #0a0a0b;
14  --kn-accent-soft: #212610;
15  --kn-accent-soft-foreground: #d6f476;
16  --kn-success: #6ee7a0;
17  --kn-success-soft: #16251d;
18  --kn-warning: #fbbf5a;
19  --kn-warning-soft: #272014;
20  --kn-danger: #ff8a8a;
21  --kn-danger-soft: #27191a;
22  --kn-info: #9aa6ff;
23  --kn-info-soft: #1b1d28;
24  --kn-ring: rgb(198 244 50 / 0.35);
25  --kn-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
26  color-scheme: dark;
27}