:root { --background: #ffffff; --foreground: #1a1a2e; --card: #f8f9fa; --card-foreground: #1a1a2e; --popover: #ffffff; --popover-foreground: #1a1a2e; --primary: #4caf50; --primary-foreground: #ffffff; --secondary: #e8f5e9; --secondary-foreground: #1a1a2e; --muted: #f1f5f9; --muted-foreground: #6b7280; --accent: #f1f5f9; --accent-foreground: #1a1a2e; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #e2e8f0; --input: #e2e8f0; --ring: #4caf50; } .dark { --background: #0d1117; --foreground: #e6edf3; --card: #161b22; --card-foreground: #e6edf3; --popover: #161b22; --popover-foreground: #e6edf3; --primary: #4caf50; --primary-foreground: #ffffff; --secondary: #1a3a1a; --secondary-foreground: #e6edf3; --muted: #21262d; --muted-foreground: #8b949e; --accent: #161b22; --accent-foreground: #e6edf3; --destructive: #f87171; --destructive-foreground: #ffffff; --border: #30363d; --input: #30363d; --ring: #4caf50; } /* index.html ships an unlayered anti-FOUC rule `.dark body { background-color: hsl(240 10% 4%) }` that otherwise wins over the layered `bg-background` utility and pins the page to the default near black. This runtime theme.css is appended last in , so re-point body at the client `--background` (wolverine surface) with equal specificity. */ .dark body { background-color: var(--background); }