Add dark mode with system preference detection and manual toggle#154
Closed
rodchristiansen wants to merge 2 commits intograhamgilbert:masterfrom
Closed
Add dark mode with system preference detection and manual toggle#154rodchristiansen wants to merge 2 commits intograhamgilbert:masterfrom
rodchristiansen wants to merge 2 commits intograhamgilbert:masterfrom
Conversation
Implements dark/light mode theme switching with: - CSS custom properties for consistent theming - Automatic system preference detection (prefers-color-scheme) - Manual toggle button in navbar - localStorage persistence of user preference - Smooth transitions between themes New files: - site_static/dark-mode.css - Theme variables and styled components - site_static/theme-toggle.js - Toggle logic and persistence Modified: - templates/base.html - Add dark mode CSS, toggle script, and navbar button
Changes: - Default to 'auto' mode (no localStorage set) to follow system theme - Toggle cycles: auto -> light -> dark -> auto - Show 'A' badge on toggle button when in auto mode - System preference changes apply immediately in auto mode - Added aria-labels for accessibility
Owner
|
Thanks for this, but we’re moving away from the python codebase in #149 |
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
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.
Adds a dark/light theme to the web UI that automatically follows the OS preference (
prefers-color-scheme) and lets users manually override via a toggle button in the navbar. Selection persists inlocalStorage.Behavior
auto → light → dark → autolocalStorageundercrypt-themetheme-toggle.jsis loaded in<head>so the theme applies before page rendersChanges
site_static/dark-mode.css— CSS custom property theming for all UI components (tables, navbar, modals, forms, DataTables, badges, code blocks). Both[data-theme="dark"]and@media (prefers-color-scheme: dark)paths.site_static/theme-toggle.js— toggle logic,localStoragepersistence, system preference listener, accessiblearia-labeltemplates/base.html— links the dark mode stylesheet, loads the toggle script in<head>, adds the toggle button (moon/sun icons) to the navbarNo server-side changes
Fully client-side. No new dependencies, no Django changes, no database migrations.