Theme studio
Edit the tokens and watch the whole site and the dashboard below follow. The link keeps your theme; export it when you're done.
Theme
Colors (light)
primary
Lightness0.205
Chroma0.000
Hue0°
Contrast (light)
WCAG 2 ratios: text needs 4.5:1, and lines and charts 3:1. 6 pairs are under.
- foreground on background19.79:1
- card-foreground on card19.79:1
- popover-foreground on popover19.79:1
- primary-foreground on primary17.16:1
- secondary-foreground on secondary16.42:1
- muted-foreground on muted4.54:1
- muted-foreground on background4.96:1
- accent-foreground on accent16.42:1
- destructive on background4.76:1
- sidebar-foreground on sidebar18.96:1
- sidebar-primary-foreground on sidebar-primary17.16:1
- sidebar-accent-foreground on sidebar-accent16.42:1
- border on background1.26:1 Needs 3:1
- input on background1.26:1 Needs 3:1
- ring on background2.59:1 Needs 3:1
- chart-1 on background1.48:1 Needs 3:1
- chart-2 on background4.73:1
- chart-3 on background7.80:1
- chart-4 on background10.39:1
- chart-5 on background15.12:1
- sidebar-border on sidebar1.21:1 Needs 3:1
- sidebar-ring on sidebar2.48:1 Needs 3:1
Radius, fonts and density
Radius0.625rem
Density
Sample dashboard
Export
Theme URL
A registry item for ndop init --theme, ndop add and the shadcn CLI. It holds the whole theme, so it never changes or expires.
CSS
Replaces the theme in your Tailwind CSS file, after @ndop/core/styles.css.
@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';
@theme {
--font-sans: 'Geist Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.545 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@media (prefers-color-scheme: dark) {
[data-ndop-theme='system'] {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
}
JSON
The tokens in the W3C Design Tokens format, for design tools.
{
"light": {
"background": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 1
}
},
"foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.145,
0,
0
],
"alpha": 1
}
},
"card": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 1
}
},
"card-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.145,
0,
0
],
"alpha": 1
}
},
"popover": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 1
}
},
"popover-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.145,
0,
0
],
"alpha": 1
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"primary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.97,
0,
0
],
"alpha": 1
}
},
"secondary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"muted": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.97,
0,
0
],
"alpha": 1
}
},
"muted-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.545,
0,
0
],
"alpha": 1
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.97,
0,
0
],
"alpha": 1
}
},
"accent-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"destructive": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.577,
0.245,
27.32499999999999
],
"alpha": 1
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.922,
0,
0
],
"alpha": 1
}
},
"input": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.922,
0,
0
],
"alpha": 1
}
},
"ring": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.708,
0,
0
],
"alpha": 1
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.87,
0,
0
],
"alpha": 1
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.556,
0,
0
],
"alpha": 1
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.439,
0,
0
],
"alpha": 1
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.371,
0,
0
],
"alpha": 1
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"radius": {
"$type": "dimension",
"$value": {
"value": 0.625,
"unit": "rem"
}
},
"sidebar": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"sidebar-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.145,
0,
0
],
"alpha": 1
}
},
"sidebar-primary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"sidebar-primary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"sidebar-accent": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.97,
0,
0
],
"alpha": 1
}
},
"sidebar-accent-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"sidebar-border": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.922,
0,
0
],
"alpha": 1
}
},
"sidebar-ring": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.708,
0,
0
],
"alpha": 1
}
}
},
"dark": {
"background": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.145,
0,
0
],
"alpha": 1
}
},
"foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"card": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"card-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"popover": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"popover-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"primary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.922,
0,
0
],
"alpha": 1
}
},
"primary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"secondary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"muted": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"muted-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.708,
0,
0
],
"alpha": 1
}
},
"accent": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"accent-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"destructive": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.704,
0.191,
22.216000000000008
],
"alpha": 1
}
},
"border": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 0.1
}
},
"input": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 0.15
}
},
"ring": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.556,
0,
0
],
"alpha": 1
}
},
"chart-1": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.87,
0,
0
],
"alpha": 1
}
},
"chart-2": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.556,
0,
0
],
"alpha": 1
}
},
"chart-3": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.439,
0,
0
],
"alpha": 1
}
},
"chart-4": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.371,
0,
0
],
"alpha": 1
}
},
"chart-5": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"sidebar": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.205,
0,
0
],
"alpha": 1
}
},
"sidebar-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"sidebar-primary": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.488,
0.243,
264.376
],
"alpha": 1
}
},
"sidebar-primary-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"sidebar-accent": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.269,
0,
0
],
"alpha": 1
}
},
"sidebar-accent-foreground": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.985,
0,
0
],
"alpha": 1
}
},
"sidebar-border": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
1,
0,
0
],
"alpha": 0.1
}
},
"sidebar-ring": {
"$type": "color",
"$value": {
"colorSpace": "oklch",
"components": [
0.556,
0,
0
],
"alpha": 1
}
}
},
"font-sans": {
"$type": "fontFamily",
"$value": [
"Geist Variable",
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Noto Sans",
"Arial",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji"
]
},
"font-mono": {
"$type": "fontFamily",
"$value": [
"Geist Mono Variable",
"ui-monospace",
"SFMono-Regular",
"Menlo",
"Monaco",
"Consolas",
"Liberation Mono",
"Courier New",
"monospace"
]
}
}