Open
Conversation
Add critical inline styles and JavaScript to prevent the "flash of white" when loading pages in dark mode. The fix includes: 1. Set background color via JavaScript immediately in the <head> 2. Add inline CSS that applies background color based on data-theme 3. Add smooth transition for background color changes This ensures the page renders with the correct background color from the very first paint, eliminating the white-to-dark flash. Fixes zhaohuabing#190 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Fix theme toggle button icon flash on page load Prevent the theme toggle button from flashing (moon to sun icon) when the page loads or is refreshed. Changes: 1. Add both moon and sun icons to the button HTML 2. Start with button hidden (opacity: 0) 3. Use inline JavaScript to show correct icon immediately 4. Fade in button smoothly with requestAnimationFrame 5. Update theme-toggle.js to handle new two-icon approach This ensures the button fades in with the correct icon visible, eliminating the visual flash. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Eliminate white flash on page load in dark mode Implement a more aggressive approach to completely prevent the white-to-dark flash when loading pages in dark mode: 1. Hide body content initially with visibility: hidden 2. Apply critical dark mode colors immediately via CSS 3. Set data-theme attribute and inline styles via JavaScript 4. Show content only after theme is applied (requestAnimationFrame) 5. Add noscript fallback for users without JavaScript This ensures the page is only rendered once the correct theme colors are in place, completely eliminating the flash. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Further reduce flash by using CSS media queries Use CSS @media (prefers-color-scheme: dark) to apply dark mode styles BEFORE JavaScript executes, eliminating most of the flash. Key changes: 1. CSS media query detects system dark mode preference instantly 2. Selector html:not([data-theme="light"]) only applies dark mode when user hasn't manually set light mode 3. JavaScript sets data-theme attribute which CSS already handles 4. Body shown immediately after script (no requestAnimationFrame needed) This approach uses the CSS cascade to apply dark mode styles as soon as the browser parses the CSS, before any JS runs. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Fix theme priority: localStorage overrides system preference Correctly prioritize user's saved preference (localStorage) over system preference when determining initial theme. Changes: 1. Script runs FIRST to check localStorage preference 2. Falls back to system preference only if no localStorage value 3. Sets data-theme attribute immediately 4. CSS then applies the correct theme based on the attribute 5. Second script shows content after CSS is parsed This ensures that if a user manually selected light mode but their system is in dark mode, the site respects the user's choice. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Fix blank page error: wait for body element before accessing it Fix the TypeError where document.body was null when trying to add the theme-loaded class. The issue was that the script ran in the <head> before the <body> element existed. Solution: 1. Move showContent logic into the first script 2. Add check for document.body existence 3. Use DOMContentLoaded event listener if DOM is still loading 4. Remove duplicate second script This ensures the page displays correctly without errors while still preventing the white flash on dark mode pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Remove the visibility: hidden approach which was blocking the entire page from showing until theme was determined. This made the page feel slower than before. New approach: 1. Set background colors immediately via inline JavaScript 2. Add smooth transitions (0.15s) for theme changes 3. Let page content render immediately (no blocking) 4. Minimal flash acceptable for faster perceived performance This restores the fast page load behavior where content can show before images load, while still keeping the white flash to a minimum with immediate background color setting. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
zhaohuabing
reviewed
Jan 26, 2026
Owner
There was a problem hiding this comment.
Hi @deining thanks for fixing the typos.
Do we need the changes in layouts/_partials?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fix PR fixes a few typos I spotted in the project.