Ouro HX

App setup

ColorSchemeProvider

Keeps the page's color scheme: it applies the person's choice (light, dark or system) as the .dark class on <html>, which is how shadcn themes switch, keeps it in localStorage, and follows the system's setting live while the choice is system. Every ColorSchemeToggle and useColorScheme under it share its options.

import { ColorSchemeProvider } from "@/lib/ouro/color-scheme";

Example

// app/root.tsx (React Router):
<html lang="en" suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: colorSchemeScript() }} />
  </head>
  <body>
    <ColorSchemeProvider>
      <Outlet />
    </ColorSchemeProvider>
  </body>
</html>

Usage

Wrap the app once, in the root layout, and put colorSchemeScript() in <head> so the first paint already has the scheme. Ouro UI components need neither: without them, dark mode is whatever .dark class the app sets.

Props

Type: ColorSchemeProviderProps.

children (required)
Type: ReactNode
Your app, or the part of it that shows the scheme.
defaultScheme
Type: "system" | "light" | "dark"
Default: "system"
The scheme before a person chooses one.
storageKey
Type: string
Default: "ouro-color-scheme"
The localStorage key that keeps the choice.
Source on GitHubThis page as Markdown