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 |
--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 |
Tailwind CSS v4 Integration
Tailwind CSS v4 introduces native theme tokens and custom variants:
src/app/globals.css
1
import "tailwindcss";
2
3
custom-variant dark (&:where(.dark, .dark *));
4
5
:root {
6
--background: fdfdfd;
7
--foreground: ;
8
--border: rgba(0, 0, 0, 0.12);
9
--muted: f4f4f5;
10
--muted-foreground: ;
11
}
12
13
.dark {
14
--background: 050505;
15
--foreground: f4f4f5;
16
--border: rgba(255, 255, 255, 0.12);
17
--muted: ;
18
--muted-foreground: a1a1aa;
19
}
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.