Repository navigation
Add status page theme mode setting and toggle - #479
Open
devmitulpatel wants to merge 4 commits into
Open
devmitulpatel wants to merge 4 commits into
devmitulpatel wants to merge 4 commits into
Conversation
Adds a theme.theme_mode setting (automatic, light, or dark) that is managed from an Appearance section on the Manage Theme dashboard page. In automatic mode, visitors get a light/system/dark toggle in the status page header, persisted in localStorage and defaulting to their system preference. Forcing light or dark locks the status page to that scheme and hides the toggle. Dark mode now uses a class strategy (.dark/.light on the html element) with a prefers-color-scheme fallback so system dark mode still works without JavaScript. Metric charts re-style through a theme-changed event when the applied theme changes. Closes cachethq#68 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CWXnTksjtcUCDPwyoWeDe
Adds pestphp/pest-plugin-browser and a browser test suite exercising the theme toggle end-to-end: system preference resolution, picking and persisting a theme, returning to the system theme, invalid stored preferences, and forced light/dark modes hiding the toggle. CI test jobs now install the Playwright browser needed to run them. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018CWXnTksjtcUCDPwyoWeDe
The metrics chart script moved out of the Blade template into its own asset, so the theme mode changes need to live there. Charts now resolve dark mode from the html class (falling back to the system preference) and repaint when the theme-changed event fires.
Author
|
Screenshots of the status page in automatic mode, following the OS preference. Forced light/dark additionally hides the header toggle. Light:
Dark:
|
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.
Closes #68.
This picks up the work from
claude/status-page-theme-options-27npnb, rebases it ontomain, and adapts the metrics theme handling to the extractedresources/js/metrics.js. The first two commits keep their original authorship from that branch.Changes
theme.theme_modesetting (auto,light,dark) with an Appearance section on the Manage Theme page.autokeeps following each visitor's system preference and shows a Light/System/Dark toggle in the status page header, persisted inlocalStorage.light/darkrenders the status page in that scheme and hides the toggle.dark/lighton<html>) with aprefers-color-schemefallback so system dark mode still works without JavaScript.theme-changedevent.Verification
composer test:unit— 1159 passedvendor/bin/pint --test— cleanvendor/bin/phpstan analyse— no errorsvendor/bin/pest tests/Browser/ThemeToggleTest.php— 7 passed