new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

shadcn/ui · all subjects

theming & dark mode

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Card spacing CSS variable customization example

To customize card spacing, set --card-spacing on the Card with an arbitrary property class: <Card className='[--card-spacing:--spacing(6)]'>...</Card>

Card spacing CSS variable

The Card component uses the --card-spacing CSS variable to control the spacing between sections and the inset of card parts. You can customize card spacing by setting --card-spacing on the Card with an arbitrary property class, for example: <Card className="[--card-spacing:--spacing(6)]">...</Card>

Badge custom colors with classes

Customize Badge colors by adding custom classes such as bg-green-50 dark:bg-green-800 directly to the Badge component.

Manual installation CSS configuration

Add to src/styles/globals.css: @import 'tailwindcss'; @import 'tw-animate-css'; @import 'shadcn/tailwind.css'; @custom-variant dark (&:is(.dark *)); followed by @theme inline block defining CSS variables for colors (background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, ring, chart-1 through chart-5, sidebar variants) and radius scales (sm, md, lg, xl, 2xl, 3xl, 4xl), then :root block with default light theme values in oklch format, .dark block with dark theme values, and @layer base with default border and outline styles plus body background and text color.

Light theme CSS variables values

Default light theme CSS variables in :root: --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0).

Dark theme CSS variables values

Dark theme CSS variables in .dark class: --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0).

Theme CSS custom properties mapping

The @theme inline block maps Tailwind theme properties to CSS variables: --color-background through --color-destructive-foreground, --color-border, --color-input, --color-ring, --color-chart-1 through --color-chart-5, --radius-sm through --radius-4xl, and --color-sidebar through --color-sidebar-ring, each referencing corresponding custom properties.

Radius scale calculations

Radius scales are calculated as: --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6).

Give your agent this brain