Skip to content

Prevent Dark Reader from double-darkening the dark theme#33

Merged
Xitee1 merged 2 commits intomainfrom
fix/dark-reader-detection
Mar 26, 2026
Merged

Prevent Dark Reader from double-darkening the dark theme#33
Xitee1 merged 2 commits intomainfrom
fix/dark-reader-detection

Conversation

@Xitee1
Copy link
Copy Markdown
Owner

@Xitee1 Xitee1 commented Mar 25, 2026

Summary

  • Add <meta name="color-scheme" content="light dark"> to declare native dark mode support (web standard)
  • Dynamically add/remove <meta name="darkreader-lock"> when dark mode is active, so Dark Reader and similar extensions don't apply their own dark theme on top of ours
  • Lock is applied in both the inline script (prevents flicker on page load) and the theme store (handles runtime toggles)

Test plan

  • Enable Dark Reader, load app in dark mode — Dark Reader should not apply
  • Switch to light mode — Dark Reader should activate if enabled
  • Reload page in dark mode — no flash of double-dark

🤖 Generated with Claude Code

Add color-scheme meta tag and dynamically manage darkreader-lock meta tag
so browser extensions like Dark Reader detect native dark mode support and
don't apply their own dark theme on top of ours.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings March 25, 2026 10:23
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR prevents Dark Reader (and similar extensions) from applying an additional darkening layer on top of the app’s native dark theme by explicitly declaring dark-mode support and conditionally “locking” Dark Reader when dark mode is active.

Changes:

  • Added <meta name="color-scheme" content="light dark"> to declare light/dark support to the browser.
  • Added darkreader-lock meta insertion to the inline boot script to avoid double-dark flicker on initial load.
  • Added darkreader-lock meta add/remove logic to the theme Pinia store to handle runtime theme toggles.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
frontend/src/stores/theme.ts Adds/removes a meta[name="darkreader-lock"] tag based on computed dark-mode state.
frontend/index.html Declares color-scheme and injects darkreader-lock during the pre-Vue inline theme bootstrapping in dark mode.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread frontend/index.html Outdated
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@Xitee1 Xitee1 merged commit 19f5ce8 into main Mar 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants