Theming

@dimah-s3/ui components read their colors from --dimah-s3-* CSS variables. The tokens are unset by default, and each one falls back to the matching shadcn variable where it is used, so the components follow your theme, including a nested .dark or theme class. Override a token to change the components without changing your app.

TokensCopy Anchor Link

shadcn has no --success or --warning. When your theme defines them, the components use them; otherwise they fall back to --dimah-s3-success-default and --dimah-s3-warning-default, a green and an amber with lighter shades under .dark.

Each utility resolves the whole chain on the element that uses it: var(--dimah-s3-primary, var(--primary)), and for success var(--dimah-s3-success, var(--success, var(--dimah-s3-success-default))). @dimah-s3/ui/styles.css sets only the two *-default colors, on :root and .dark, and the shadcn registry writes the same two into your CSS when you add an item.

Customizing colorsCopy Anchor Link

Override tokens after the stylesheet import, on :root:

@import "@dimah-s3/ui/styles.css";

:root {
  --dimah-s3-primary: oklch(0.65 0.15 150); 
  --dimah-s3-destructive: oklch(0.55 0.2 25); 
}

Or on any container, to style one area differently:

.avatar-panel {
  --dimah-s3-primary: oklch(0.6 0.14 250); 
  --dimah-s3-card: var(--muted); 
}

The components read the tokens through Tailwind utilities such as bg-dimah-s3-card and text-dimah-s3-primary. Those utilities read the variable where they are used, so an override on a container reaches every component inside it. You can use the same utilities in your own parts.

Stock shadcn primitives the components render, such as Button and Attachment, keep your app's --primary and --card.

Frequently asked questionsCopy Anchor Link

.dark {
  --dimah-s3-primary: oklch(0.75 0.14 150);
}