Theming

Change shared design values in one place.

Install the theme tokens

Add the optional theme item to a Tailwind CSS v4 project set up with shadcn/ui. It adds light and dark --vng-* values to your global CSS and connects the shared colors to shadcn tokens.

code

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/vengeance-theme.json

Set your colors

Edit the generated values in your global CSS. Set dark colors in the.dark block as well.

app/globals.css

:root {
  --vng-primary: #2563eb;
  --vng-primary-hover: #1d4ed8;
  --vng-primary-foreground: #ffffff;
  --vng-radius-md: 10px;
  --vng-transition-speed: 200ms;
}

.dark {
  --vng-primary: #60a5fa;
  --vng-primary-hover: #93c5fd;
  --vng-primary-foreground: #09090b;
}

The theme also provides secondary, danger, success, warning, background, border, radius, and spacing tokens. Components copied by hand still work with the standard shadcn color tokens; add the theme item when you want the shared VengeanceUI controls.