Theming

DevClub UI employs an architectural design system engineered for high visual fidelity, laser-sharp contrast, and smooth theme transitions.

CSS Design Tokens

All components reference semantic CSS variables declared on the root element and dark selector. Below is the reference table of core palette tokens:

Variable	Values (Light / Dark)	Usage
`--background`	#fdfdfd / #050505	Main application background canvas
`--foreground`	#09090b / #f4f4f5	High-contrast text and active icons
`--muted`	#f4f4f5 / #18181b	Muted background for chips, inputs, code panels
`--muted-foreground`	#71717a / #a1a1aa	Secondary metadata and caption text
`--border`	rgba(0,0,0,0.12) / rgba(255,255,255,0.12)	Primary bounding borders for cards and sections
`--border-subtle`	rgba(0,0,0,0.08) / rgba(255,255,255,0.08)	Subtle inner dividers and secondary gridlines
`--border-hairline`	rgba(0,0,0,0.14) / rgba(255,255,255,0.16)	High-precision edge highlights and rulers
`--card`	#ffffff / #0c0c0e	Card surfaces, paired with --card-foreground for text
`--primary`	#18181b / #f4f4f5	Solid emphasis fills, paired with --primary-foreground
`--panel`	#ffffff / #151517	Elevated dialogs, floating toolbars, and studios
`--line`	rgba(0,0,0,0.08) / rgb(255,255,255,0.08)	Architectural blueprint and grid lines
`--line-strong`	rgba(0,0,0,0.14) / rgb(255,255,255,0.16)	Stronger outlines and focus borders
`--text`	#09090b / #f2f2f3	Text inside panels and inputs
`--faint`	#a1a1aa / #56565c	Placeholders and faint hints
`--ink`	#ffffff / #0b0b0c	Inverse text, the opposite of --text

Tailwind CSS v4 Integration

Declare the variables on :root and .dark, then map them to Tailwind colors in an @theme inline block. The mapping is what turns each variable into utilities such as bg-background, text-muted-foreground and border-border. Without it, those classes are not generated.

src/app/globals.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

:root {

--background: #fdfdfd;

--foreground: #09090b;

--border-subtle: rgba(0, 0, 0, 0.08);

--border-hairline: rgba(0, 0, 0, 0.14);

--pattern-line: rgba(0, 0, 0, 0.16);

--pattern: rgba(0, 0, 0, 0.12);

--border: rgba(0, 0, 0, 0.12);

--muted: #f4f4f5;

--muted-foreground: #71717a;

--primary: #18181b;

--primary-foreground: #ffffff;

--line: rgba(0, 0, 0, 0.08);

--line-strong: rgba(0, 0, 0, 0.14);

--panel: #ffffff;

--text: #09090b;

--faint: #a1a1aa;

--ink: #ffffff;

--card: #ffffff;

--card-foreground: #09090b;

}

.dark {

--background: #050505;

--foreground: #f4f4f5;

--border-subtle: rgba(255, 255, 255, 0.08);

--border-hairline: rgba(255, 255, 255, 0.16);

--pattern-line: rgba(255, 255, 255, 0.1);

--pattern: rgba(255, 255, 255, 0.08);

--border: rgba(255, 255, 255, 0.12);

--muted: #18181b;

--muted-foreground: #a1a1aa;

--primary: #f4f4f5;

--primary-foreground: #09090b;

--line: rgb(255 255 255 / 0.08);

--line-strong: rgb(255 255 255 / 0.16);

--panel: #151517;

--text: #f2f2f3;

--faint: #56565c;

--ink: #0b0b0c;

--card: #0c0c0e;

--card-foreground: #f4f4f5;

}

@theme inline {

--color-background: var(--background);

--color-foreground: var(--foreground);

--color-border: var(--border);

--color-border-subtle: var(--border-subtle);

--color-border-hairline: var(--border-hairline);

--color-muted: var(--muted);

--color-muted-foreground: var(--muted-foreground);

--color-primary: var(--primary);

--color-primary-foreground: var(--primary-foreground);

--color-line: var(--line);

--color-line-strong: var(--line-strong);

--color-panel: var(--panel);

--color-text: var(--text);

--color-faint: var(--faint);

--color-ink: var(--ink);

--color-card: var(--card);

--color-card-foreground: var(--card-foreground);

--font-sans: var(--font-poppins), sans-serif;

--font-serif: var(--font-gambetta), Georgia, serif;

--font-poppins: var(--font-poppins), sans-serif;

}

If your project already ran npx shadcn@latest init, keep its variables and add any DevClub tokens that are missing, such as --border-subtle, --border-hairline, --panel, --line, --line-strong, --text, --faint and --ink, with matching --color-* entries.

Smooth View Transitions

AnimatedThemeToggler uses the native View Transitions API with polygon clipping paths to deliver ultra-smooth, 60fps circular and geometric ripples across the canvas.

Accessibility & Contrast

Foreground and background tokens meet WCAG AAA standards with a contrast ratio exceeding 18:1 in both light and dark modes. Muted text meets WCAG AA standards.