Prevent dark mode flash on page refresh #182
Conversation
WalkthroughThe pull request introduces enhanced theme management functionality across the application. A new script in Changes
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant App
participant SystemPreference
User->>Browser: Load Page
Browser->>App: Initialize Theme
App->>SystemPreference: Check System Theme
SystemPreference-->>App: Return Theme Preference
App->>Browser: Apply Theme (Light/Dark)
Browser->>User: Render Page with Selected Theme
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/App.tsx (2)
40-48: Centralize theme styling in one place
IntroducingapplyThemeunifies theme application logic, improving maintainability. However, consider validating the input (e.g., handling unexpected theme values) to guard against potential inconsistencies.
56-69: Account for system preference across browsers
Implementing system theme detection and dynamic updates is a great enhancement. Consider a fallback for browsers that do not support the'change'event onmatchMedia(particularly older ones) to ensure broad compatibility.index.html (1)
34-44: Optimize the inline theme script
The initial script ensures a consistent theme is applied before the page renders. Verify that localStorage is always accessible in the environment. For improved performance, consider inlining only minimal logic and deferring or bundling more complex checks if needed.src/assets/styles/base/_common.scss (1)
132-135: Extend background color for dark mode
Setting a default background color on<html>helps prevent a flash. However, you might also define a dark-mode-specific background (e.g., via.darkmode html { background-color: ... }) for a smoother transition in dark mode.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
index.html(1 hunks)src/App.tsx(2 hunks)src/assets/styles/base/_common.scss(1 hunks)
🔇 Additional comments (2)
src/App.tsx (2)
18-18: Confirm styling dependencies
Importingstyle.scsshere seems appropriate for ensuring global styles are loaded. No issues found.
53-53: Synchronized darkMode usage
This line succinctly toggles between dark and light modes. It aligns well with the rest of the theme logic. No issues found.
What this PR does / why we need it?
This PR fixes two theme-related issues:
To solve this, we now apply dark mode styles earlier in the page load process (before First Paint), so users won't see any unwanted white flashes when refreshing.
Previously, when using system preference settings, the app didn't respond to dark/light mode changes. Now the theme updates properly when system preferences change.
Any background context you want to provide?
What are the relevant tickets?
Fixes #
Checklist
Summary by CodeRabbit
New Features
Style
Chores