Theming

Choose your palette

Start with Cavemio Green or make the collection your own. Your choice updates this website and its demos, and stays with you on your next visit.

Change the brand color manually

With Cavemio’s theme installed, point the eleven --color-brand-* variables at a Tailwind palette. The example below follows your selected palette.

@theme {
  --color-brand-50: var(--color-cavemio-50);
  --color-brand-100: var(--color-cavemio-100);
  --color-brand-200: var(--color-cavemio-200);
  --color-brand-300: var(--color-cavemio-300);
  --color-brand-400: var(--color-cavemio-400);
  --color-brand-500: var(--color-cavemio-500);
  --color-brand-600: var(--color-cavemio-600);
  --color-brand-700: var(--color-cavemio-700);
  --color-brand-800: var(--color-cavemio-800);
  --color-brand-900: var(--color-cavemio-900);
  --color-brand-950: var(--color-cavemio-950);
}

Put this block after the theme import. For a custom palette, leave data-palette off your html element; a named preset overrides these default brand values.

You can also replace the values with your own rgb(), oklch(), or hex colors. Define shades 50 through 950 so light backgrounds, dark accents, and focus states all have a matching color.

Use the theme in your project

Already using shadcn/ui? Cavemio components inherit your existing semantic colors. To use our complete palette and light/dark mappings, save Cavemio’s theme.css beside your global stylesheet. To match this website’s subtly tinted page backgrounds and neutral cards, borders, and text, also save the optional surface stylesheet.

@import "tailwindcss";
@import "./cavemio-theme.css";
@import "./palette-surfaces.css";

The download includes the brand scales, semantic mappings, and light/dark colors for Tailwind CSS 4. Remove conflicting color definitions from your global stylesheet, while keeping your fonts, radii, and other settings. It does not install components or change your layout.

From palette to purpose

Brand shades describe a color. Semantic variables describe where it belongs. Components consume semantic variables, so changing a palette updates their appearance without changing their behavior.

:root {
  --primary: var(--color-brand-300);
  --accent: var(--color-brand-100);
  --accent-ink: var(--color-brand-700);
  --ring: var(--color-brand-600);
}

[data-theme="dark"] {
  --accent: var(--color-brand-900);
  --accent-ink: var(--color-brand-300);
  --ring: var(--color-brand-300);
}

Light and dark, independently

Set data-palette and data-theme on your document’s html element. Choose a color once, then switch appearance without losing it.

/* Document attributes */
/* <html data-palette="violet" data-theme="dark"> */

/* Custom neutral surfaces can be changed independently. */
:root {
  --surface-page: rgb(250 250 250);
  --surface-raised: rgb(255 255 255);
  --surface-page-dark: rgb(18 18 18);
  --surface-raised-dark: rgb(27 27 27);
}

On this website, light pages blend 30% of the selected brand shade with white. Dark pages use solid #0a0a0a, with neutral gray selection fills across every palette. Cards and popovers stay white in light mode and black in dark mode. Muted surfaces use #f5f5f5 and #171717, respectively, with neutral text and borders. Success stays green, warnings stay amber, and errors stay red. Demo avatars and images retain their own content colors. Always check contrast and keyboard focus when defining a custom palette.