@ousi-ui/theme

@ousi-ui/theme

CSS themes and design tokens for @ousi-ui/vue.
Tailwind CSS v4, OKLCH color system, light & dark mode.

Install

pnpm add @ousi-ui/theme

Usage

@import "tailwindcss";
@import "@ousi-ui/theme";

That's it. All --ousi-* CSS variables and Tailwind utilities (bg-ousi-accent, rounded-ousi-xl, etc.) are available.

Themes

/* Import specific themes */
@import "@ousi-ui/theme/themes/ousi-dark";
@import "@ousi-ui/theme/themes/ousi-light";
@import "@ousi-ui/theme/shared/theme";

Switch at runtime:

document.documentElement.setAttribute('data-theme', 'dark')

Customize

:root {
  --ousi-accent: oklch(0.62 0.195 254);
  --ousi-radius: 0.75rem;
  --ousi-font-sans: 'Inter', system-ui, sans-serif;
}

Or use the Playground to build your theme visually.

License

MIT © Carlos Aroca