#Theme and colors

Wovryn applications share one semantic color contract. Components use roles such as primary, background, and muted instead of palette-specific colors, so the same markup responds to light and dark schemes.

#Import the theme

Import the UI kit theme after Tailwind in the application's global stylesheet:

@import "tailwindcss";
@import "@wovryn/uikit/theme.css";

The package registers its bundled component classes as a Tailwind source. No application-specific node_modules source path is required.

#Semantic colors

Use semantic utilities for application UI. Palette utilities such as bg-violet-600 remain available for charts, illustrations, and intentional one-off brand treatments, but components do not depend on them.

The default primary color is #855FCC. The secondary background is #F3EFFA with #000000 foreground text. These values are available through Wovryn's semantic CSS tokens, and the primary color is also exposed through Mantine's theme.colors.primary palette.

#Color schemes

ThemeProvider manages light, dark, and auto schemes and writes the resolved value to data-mantine-color-scheme on the document:

import { theme, ThemeProvider } from "@wovryn/uikit";

export function App() {
  return (
    <ThemeProvider defaultColorScheme="auto" theme={theme}>
      <main className="bg-background text-foreground">...</main>
    </ThemeProvider>
  );
}

The shared token values and Tailwind's dark: variant both follow that attribute. Do not add a separate .dark class.

Use the exported hooks to build a scheme switcher. The computed hook is always light or dark, including when the configured scheme is auto:

import { useColorScheme, useComputedColorScheme } from "@wovryn/uikit";

export function ColorSchemeToggle() {
  const computed = useComputedColorScheme("light");
  const { setColorScheme } = useColorScheme();

  return (
    <button onClick={() => setColorScheme(computed === "dark" ? "light" : "dark")}>
      Use {computed === "dark" ? "light" : "dark"} mode
    </button>
  );
}

#Application overrides

Override namespaced Wovryn variables after importing the theme. Keep foreground tokens readable against their matching backgrounds.

:root {
  --wovryn-color-primary: oklch(0.541 0.281 293.009);
  --wovryn-color-primary-hover: oklch(0.491 0.27 292.581);
  --wovryn-color-primary-foreground: oklch(0.985 0 0);
}

[data-mantine-color-scheme="dark"] {
  --wovryn-color-primary: oklch(0.702 0.183 293.541);
  --wovryn-color-primary-hover: oklch(0.811 0.111 293.571);
  --wovryn-color-primary-foreground: oklch(0.145 0 0);
}

CSS variables customize the visual color system used by Wovryn component recipes. The exported TypeScript theme configures Mantine's matching primary palette and component behavior. When changing the brand color for an application, update both systems so custom Mantine components and Wovryn components remain aligned.