[dark mode] avoid FoUC on first render#6881
Conversation
WalkthroughAdds an inline script to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6881 +/- ##
=======================================
Coverage 94.27% 94.27%
=======================================
Files 561 561
Lines 53641 53641
Branches 5178 5178
=======================================
Hits 50571 50571
Misses 3061 3061
Partials 9 9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @www/index.html:
- Around line 14-18: The script reads
localStorage.getItem('recharts-color-mode') into storedMode but uses it
directly, which can be invalid; update the logic that sets mode (the var
storedMode / var mode block) to validate storedMode === 'light' || storedMode
=== 'dark' and only use it when valid, otherwise compute mode from
window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
then set document.documentElement.setAttribute('data-mode', mode) as before.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
www/index.htmlwww/src/components/color-mode/defineColorModeStore.ts
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas constAll imports from
rechartsmust use the public API entry point (e.g.,import { TooltipIndex } from 'recharts'). Imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed and will fail the linter.
Files:
www/src/components/color-mode/defineColorModeStore.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/src/components/color-mode/defineColorModeStore.ts
🧠 Learnings (1)
📚 Learning: 2025-11-16T09:14:24.918Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6640
File: src/cartesian/Bar.tsx:156-159
Timestamp: 2025-11-16T09:14:24.918Z
Learning: In recharts, SSR (Server-Side Rendering) is not yet supported—charts don't render at all in SSR environments. The `isAnimationActive: 'auto'` mode is preparatory work for future SSR support, so testing of this mode should be deferred until SSR support is actually implemented.
Applied to files:
www/index.html
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build, Test, Pack
🔇 Additional comments (2)
www/src/components/color-mode/defineColorModeStore.ts (1)
9-12: LGTM! Helpful duplication notes added.The JSDoc comments clearly document the intentional duplication with
index.htmland remind future maintainers to keep both locations in sync. This is good practice for avoiding FOUC-related bugs during refactoring.Also applies to: 55-58
www/index.html (1)
8-23: Effective approach to prevent FOUC.Placing the color mode initialization script in
<head>as a blocking script ensures the correctdata-modeattribute is set before any CSS is applied, effectively preventing the flash of unstyled content. The IIFE pattern and try/catch wrapper are appropriate for this use case.
Description
At the moment the dark mode suffers from FoUC, to fix, I had to duplicated some logic unfortunately.
Related Issue
#6825
Motivation and Context
FoUC on first render
How Has This Been Tested?
Manually
Screenshots (if appropriate):
Types of changes
Checklist:
Summary by CodeRabbit
Chores
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.