Theming

Ouro HX parts paint themselves from a small set of CSS variables, the ones a shadcn/ui theme sets. Change them and your app changes coats: buttons, menus, dialogs, charts and focus rings, without touching a component.

You can try it on the home page: pick one of the coloured dots near the top, or open "Theme" in the header.

Start from a preset

On the home page, choose a preset under "Repaint the whole ship", then press "Copy theme". Paste what you copied at the end of your global CSS. It brings :root, .dark, @theme inline and the preset's fonts. "Copy tokens only" brings just the variables, if you already load your own fonts.

The default look, Pearl, is what ouro-theme installs:

npx shadcn@latest add ourostack/ouro-ui/ouro-theme#v1.3.10

Mix your own paint

A theme's personality lives in a handful of lines. Put these after your theme's CSS and change the values:

:root {
  --primary: #1a7f37;
  --primary-foreground: #ffffff;
  --ring: #1a7f37;
  --radius: 0.5rem;
}
.dark {
  --primary: #3fb950;
  --primary-foreground: #04170a;
  --ring: #3fb950;
}

• --primary is your brand colour: the main button, links, the checked box, the chosen tab.
• --primary-foreground is the text that sits on it. Keep it readable: at least 4.5 to 1 against --primary.
• --ring is the focus ring that keyboard users follow.
• --radius sets the corners. 0rem is square; 1rem is pebble-round.

The maker on the home page, under "Or mix your own paint", writes these lines for you while the sample repaints.

Go further

The other variables cover the rest of the room: --background and --foreground for the page, --card and --popover for raised surfaces, --muted and --muted-foreground for quiet text, --border and --input for lines, --destructive for danger, --chart-1 to --chart-5 for data. Ouro HX also reads --font-heading for headings and the --shadow-xs to --shadow-xl scale for depth.

Set light values in :root and dark values in .dark. Ouro HX switches with the dark class on <html>, as shadcn/ui does.

Live

The site's Live theme is Pearl under your own sky. It reads only your device's clock and time zone, so nothing asks for your location. At dawn the page turns rosy, by day it is Pearl's blue, at dusk it goes golden and at night it lights indigo lanterns. The porthole's sky, sun and sea follow along. Your own app can do the same by swapping a few of the variables above on a timer.