Theming

One accent, set once as CSS variables. Dark mode as a variant. No theme file, no configuration object.

The accent

Primary buttons, checked controls, selected days, focus rings and illustrations all read accent-* colors. Those are Tailwind tokens defined inline, so they resolve where they are used and fall back to blue until you set them. Declare them once next to your @theme:

@import "tailwindcss";

@theme inline {
  --color-accent-200: var(--accent-200, var(--color-blue-200));
  --color-accent-300: var(--accent-300, var(--color-blue-300));
  --color-accent-400: var(--accent-400, var(--color-blue-400));
  --color-accent-500: var(--accent-500, var(--color-blue-500));
  --color-accent-600: var(--accent-600, var(--color-blue-600));
  --color-accent-700: var(--accent-700, var(--color-blue-700));
  --color-accent-900: var(--accent-900, var(--color-blue-900));
}

Set your accent

Seven stops, one hue. The block below is the Trelund teal; pick a hue on the home page and copy the block it generates, or write your own values:

:root {
  --accent-200: oklch(0.882 0.033 184.7);
  --accent-300: oklch(0.809 0.058 184.7);
  --accent-400: oklch(0.707 0.091 184.7);
  --accent-500: oklch(0.65 0.118 184.7);
  --accent-600: oklch(0.6 0.118 184.7);
  --accent-700: oklch(0.53 0.125 184.7);
  --accent-900: oklch(0.379 0.081 184.7);
}

An accent per page

Because the tokens resolve where they are set, a class on any element re-tints everything inside it. Define a utility per palette you need:

@utility accent-violet {
  --accent-200: var(--color-violet-200);
  --accent-300: var(--color-violet-300);
  --accent-400: var(--color-violet-400);
  --accent-500: var(--color-violet-500);
  --accent-600: var(--color-violet-600);
  --accent-700: var(--color-violet-700);
  --accent-900: var(--color-violet-900);
}

Then set it on the root of the page, the panel or the dialog:

export default function BillingPage() {
  return (
    <div className="accent-violet">
      {/* ... */}
    </div>
  )
}

Dark mode

Every component ships its dark: classes. Tailwind follows the operating system by default; to give the user a switch instead, make the variant read a class on the root element:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

Then toggle that class and remember the choice:

function toggleDark() {
  let isDark = document.documentElement.classList.toggle('dark')
  localStorage.theme = isDark ? 'dark' : 'light'
}

Everything else

Fonts, radii, spacing and the neutral palette are the ones of your Tailwind project: the components use zinc for text and borders and nothing else that is theirs. To change them, edit the files, they are yours.