Skip to content

feat: Improve dark mode with early application and FOUC fix #804

Merged
boomzero merged 11 commits intomasterfrom
dev
Jun 4, 2025
Merged

feat: Improve dark mode with early application and FOUC fix #804
boomzero merged 11 commits intomasterfrom
dev

Conversation

@boomzero
Copy link
Member

@boomzero boomzero commented Jun 2, 2025

Although as @langningchen noted this doesn't fix the issue, it helps makes it much more tolerable in my experience.

Ref #343


By submitting this pull request, I confirm the following:

  1. I have read and understood the contributor's guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
  2. I have commented on my proposed changes within the code and I have tested my changes.
  3. I am willing to help maintain this change if there are issues with it later.
  4. It is compatible with the GNU General Public License v3.0
  5. I have squashed any insignificant commits. (git rebase)
  6. I have checked that another pull request for this purpose does not exist.
  7. I have considered and confirmed that this submission will be valuable to others.
  8. I accept that this submission may not be used, and the pull request can be closed at the will of the maintainer.
  9. I give this submission freely and claim no ownership to its content.

  • I have read the above and my PR is ready for review. Check this box to confirm

boomzero and others added 8 commits June 1, 2025 19:29
- Applies dark theme immediately at `document-start` using `data-bs-theme`
  and critical preloader CSS to prevent flash of unstyled/light content.
- Leverages localStorage via `UtilityEnabled` for reliable early theme detection.
- Enhances user experience with smoother theme transition on page load.
Added a `color-scheme` meta tag to improve browser UI hints for dark/light modes and updated the dark mode preloader to temporarily hide the body, preventing visual flashes during Bootstrap transitions. Also streamlined style cleanup on DOMContentLoaded for better consistency.
@hendragon-bot hendragon-bot bot added the user-script This issue or pull request is related to the main user script label Jun 2, 2025
@boomzero boomzero requested review from a team, PythonSmall-Q, langningchen and ptsq-bot June 2, 2025 14:08
@boomzero boomzero linked an issue Jun 2, 2025 that may be closed by this pull request
2 tasks
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jun 2, 2025

Deploying xmoj-script-dev-channel with  Cloudflare Pages  Cloudflare Pages

Latest commit: aa1b29e
Status: ✅  Deploy successful!
Preview URL: https://5b58453b.xmoj-script-dev-channel.pages.dev

View logs

@boomzero boomzero merged commit c8ed5aa into master Jun 4, 2025
10 of 12 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size/XXL user-script This issue or pull request is related to the main user script

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] if dark mode is enabled, the page flashes when loading

1 participant