Buy me a coffee

Theme builder

Pick a color, a gray and a corner radius, check them in light and dark, then copy the theme files into your project.

Primary color
Grays
Corners
Notifications

Choose what you hear about.

Pro
Notifications

Choose what you hear about.

Pro

Copy your theme

Replace the files in src/lib/styles/distill-ui with these. They're the files you already have, with only the colors changed.

themes/light.css 
/*
 * Light theme. Semantic names mirror shadcn/ui so they feel familiar.
 * Used by default, and when <html> has data-theme="light".
 */
:root,
[data-theme='light'] {
	color-scheme: light;

	--dui-color-background: oklch(1 0 0);
	--dui-color-foreground: oklch(0.145 0 0);
	--dui-color-card: oklch(1 0 0);
	--dui-color-card-foreground: oklch(0.145 0 0);
	--dui-color-popover: oklch(1 0 0);
	--dui-color-popover-foreground: oklch(0.145 0 0);
	--dui-color-primary: oklch(0.205 0 0);
	--dui-color-primary-foreground: oklch(0.985 0 0);
	--dui-color-secondary: oklch(0.97 0 0);
	--dui-color-secondary-foreground: oklch(0.205 0 0);
	--dui-color-muted: oklch(0.97 0 0);
	--dui-color-muted-foreground: oklch(0.556 0 0);
	--dui-color-accent: oklch(0.97 0 0);
	--dui-color-accent-foreground: oklch(0.205 0 0);
	--dui-color-destructive: oklch(0.577 0.245 27.325);
	--dui-color-destructive-foreground: oklch(0.985 0 0);
	--dui-color-success: oklch(0.6 0.17 150);
	--dui-color-border: oklch(0.922 0 0);
	--dui-color-input: oklch(0.922 0 0);
	--dui-color-ring: oklch(0.708 0 0);
	--dui-color-overlay: oklch(0 0 0 / 10%);

	/* Surfaces that differ by theme in more than color: outline controls, active tabs and switches. */
	--dui-color-control: transparent;
	--dui-color-control-hover: var(--dui-color-muted);
	--dui-color-tab-active: var(--dui-color-background);
	--dui-color-tab-active-border: transparent;
	--dui-color-switch-track: var(--dui-color-input);
	--dui-color-switch-thumb: var(--dui-color-background);
	--dui-color-switch-thumb-checked: var(--dui-color-background);
}
themes/dark.css 
/*
 * Dark theme. Applies when:
 *   - <html> has class="dark" or data-theme="dark", or
 *   - the OS prefers dark and the page hasn't opted into light
 *     (class="light" or data-theme="light").
 * The values are listed twice because a media query can't share a rule
 * with a plain selector. Keep both blocks identical.
 */
.dark,
[data-theme='dark'] {
	color-scheme: dark;

	--dui-color-background: oklch(0.145 0 0);
	--dui-color-foreground: oklch(0.985 0 0);
	--dui-color-card: oklch(0.205 0 0);
	--dui-color-card-foreground: oklch(0.985 0 0);
	--dui-color-popover: oklch(0.205 0 0);
	--dui-color-popover-foreground: oklch(0.985 0 0);
	--dui-color-primary: oklch(0.922 0 0);
	--dui-color-primary-foreground: oklch(0.205 0 0);
	--dui-color-secondary: oklch(0.269 0 0);
	--dui-color-secondary-foreground: oklch(0.985 0 0);
	--dui-color-muted: oklch(0.269 0 0);
	--dui-color-muted-foreground: oklch(0.708 0 0);
	--dui-color-accent: oklch(0.371 0 0);
	--dui-color-accent-foreground: oklch(0.985 0 0);
	--dui-color-destructive: oklch(0.704 0.191 22.216);
	--dui-color-destructive-foreground: oklch(0.985 0 0);
	--dui-color-success: oklch(0.7 0.17 150);
	--dui-color-border: oklch(1 0 0 / 10%);
	--dui-color-input: oklch(1 0 0 / 15%);
	--dui-color-ring: oklch(0.556 0 0);
	--dui-color-overlay: oklch(0 0 0 / 50%);

	--dui-color-control: color-mix(in oklch, var(--dui-color-input) 30%, transparent);
	--dui-color-control-hover: color-mix(in oklch, var(--dui-color-input) 50%, transparent);
	--dui-color-tab-active: var(--dui-color-control);
	--dui-color-tab-active-border: var(--dui-color-input);
	--dui-color-switch-track: color-mix(in oklch, var(--dui-color-input) 80%, transparent);
	--dui-color-switch-thumb: var(--dui-color-foreground);
	--dui-color-switch-thumb-checked: var(--dui-color-primary-foreground);
}

@media (prefers-color-scheme: dark) {
	:root:not(.light):not([data-theme='light']) {
		color-scheme: dark;

		--dui-color-background: oklch(0.145 0 0);
		--dui-color-foreground: oklch(0.985 0 0);
		--dui-color-card: oklch(0.205 0 0);
		--dui-color-card-foreground: oklch(0.985 0 0);
		--dui-color-popover: oklch(0.205 0 0);
		--dui-color-popover-foreground: oklch(0.985 0 0);
		--dui-color-primary: oklch(0.922 0 0);
		--dui-color-primary-foreground: oklch(0.205 0 0);
		--dui-color-secondary: oklch(0.269 0 0);
		--dui-color-secondary-foreground: oklch(0.985 0 0);
		--dui-color-muted: oklch(0.269 0 0);
		--dui-color-muted-foreground: oklch(0.708 0 0);
		--dui-color-accent: oklch(0.371 0 0);
		--dui-color-accent-foreground: oklch(0.985 0 0);
		--dui-color-destructive: oklch(0.704 0.191 22.216);
		--dui-color-destructive-foreground: oklch(0.985 0 0);
		--dui-color-success: oklch(0.7 0.17 150);
		--dui-color-border: oklch(1 0 0 / 10%);
		--dui-color-input: oklch(1 0 0 / 15%);
		--dui-color-ring: oklch(0.556 0 0);
		--dui-color-overlay: oklch(0 0 0 / 50%);

		--dui-color-control: color-mix(in oklch, var(--dui-color-input) 30%, transparent);
		--dui-color-control-hover: color-mix(in oklch, var(--dui-color-input) 50%, transparent);
		--dui-color-tab-active: var(--dui-color-control);
		--dui-color-tab-active-border: var(--dui-color-input);
		--dui-color-switch-track: color-mix(in oklch, var(--dui-color-input) 80%, transparent);
		--dui-color-switch-thumb: var(--dui-color-foreground);
		--dui-color-switch-thumb-checked: var(--dui-color-primary-foreground);
	}
}
tokens.css 
/* In tokens.css, change this one line. */
--dui-radius: 0.625rem;

Next: Customizing →