Theming

Every colour, radius and stacking level is a CSS variable in @nuecrea/core/tokens.css, exposed to Tailwind as utilities (bg-primary, rounded-lg, z-(--z-dialog)). Both frameworks read the same variables, so one theme styles both.

Create a theme

Override the variables after the tokens import. Give colours a light and a dark value with light-dark():

@import 'tailwindcss';
@import '@nuecrea/core/tokens.css';

:root {
  --primary: light-dark(oklch(0.48 0.2 264), oklch(0.72 0.16 264));
  --primary-foreground: oklch(0.985 0 0);
  --ring: oklch(0.62 0.18 264);
  --radius: 0.75rem;
}

Override these raw variables only, not Tailwind's --color-* theme variables; those point at the raw ones.

Dark mode

Pages follow the system setting. Add class="dark" or class="light" to <html> to force a mode. The dark: variant follows the same rule.

Styling one component

Pass classes (className in React, class in Angular); they are added after the component's own. Style states with the data attributes listed on each component page, e.g. data-open:shadow-dialog. For a lasting change, edit the copied file in your app.

Tokens