Force dark theme on web regardless of device color scheme - #20
Conversation
Tailwind v4's dark: variant defaults to prefers-color-scheme, so on light-mode devices the dark:* utilities (use-case card gradients, interactive demo components, etc.) fell back to their light variants even though <html> always has the dark class. Override the dark variant to key off the .dark class instead, and set color-scheme: dark so native UI (form controls, scrollbars) matches. https://claude.ai/code/session_01QFB1GtUSutKGZVRnEGkx8X
📝 WalkthroughWalkthroughThis PR updates the Tailwind dark mode implementation in ChangesDark Mode Implementation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR ensures the website’s dark theme is applied consistently regardless of the user’s OS/device color scheme by redefining Tailwind’s dark: variant to use the always-present .dark class on the root <html> element, and by aligning native UI rendering with a dark color scheme.
Changes:
- Override Tailwind v4
dark:behavior to key off.dark(class-based) instead ofprefers-color-scheme(media-based). - Set
color-scheme: darkunder.darkso native controls/scrollbars render in dark mode.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
web/src/styles/globals.css (1)
5-5: Stylelint won’t block CI in this repo as-is; this line is fine for Tailwind
- There’s no
stylelintdependency installed (nostylelint/stylelint-config-*in root orweblockfiles) and nostylelintscript in eitherpackage.json;.stylelintrc.jsonexists but appears unused by current CI/scripts.@custom-variant dark (&:where(.dark, .dark *));can stay; only considerignoreAtRules/rule adjustments if you later enable stylelint for Tailwind v4 at-rules.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/src/styles/globals.css` at line 5, The CSS uses the Tailwind v4 at-rule "`@custom-variant` dark (&:where(.dark, .dark *));" and current CI doesn't run stylelint, so leave it as-is now; if you enable stylelint later, update the .stylelintrc.json to either add "ignoreAtRules": ["custom-variant"] or install/extend a Tailwind-aware config (e.g., stylelint-config-tailwindcss) so the `@custom-variant` at-rule is accepted, and ensure the rule name "`@custom-variant`" is whitelisted rather than changing the CSS line itself.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@web/src/styles/globals.css`:
- Line 5: The CSS uses the Tailwind v4 at-rule "`@custom-variant` dark
(&:where(.dark, .dark *));" and current CI doesn't run stylelint, so leave it
as-is now; if you enable stylelint later, update the .stylelintrc.json to either
add "ignoreAtRules": ["custom-variant"] or install/extend a Tailwind-aware
config (e.g., stylelint-config-tailwindcss) so the `@custom-variant` at-rule is
accepted, and ensure the rule name "`@custom-variant`" is whitelisted rather than
changing the CSS line itself.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: aeb0c891-79b1-4561-97bb-e72ee691a5b5
📒 Files selected for processing (1)
web/src/styles/globals.css
Problem
On devices set to light mode, parts of the landing page rendered with light backgrounds — the "Built for every use case" card headers and the "See it in action" interactive demos — while the rest of the site stayed dark.
Cause
The site always sets
<html class="dark">, but Tailwind v4'sdark:variant defaults to theprefers-color-schememedia query, not the.darkclass. So on light-mode devices, everydark:*utility fell back to its light variant.Fix
In
web/src/styles/globals.css:darkvariant to key off the.darkclass:@custom-variant dark (&:where(.dark, .dark *));— since the class is always present, the site is always dark with no theme toggle needed.color-scheme: darkso native UI (form controls, scrollbars) matches.Verified: the production build compiles with zero
prefers-color-schemequeries and all 74 dark rules scoped to the.darkclass.https://claude.ai/code/session_01QFB1GtUSutKGZVRnEGkx8X
Generated by Claude Code
Summary by CodeRabbit