Add dark mode#780
Open
Alwinator wants to merge 1 commit into
Open
Conversation
|
Could you please share screenshots of the UI after the recent changes? |
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.
Related
Summary
This PR adds automatic dark mode support to the starlette-admin interface. The admin now follows the user's operating system / browser color-scheme preference and switches between light and dark themes accordingly — with no configuration required.
Tabler (the underlying UI framework) already ships a dark theme that is enabled via the
data-bs-theme="dark"attribute on<body>. This PR wires that up automatically and patches the bundled third-party widgets that don't ship their own dark variants.What's included
starlette_admin/statics/js/dark-mode.js— Detects theprefers-color-scheme: darkmedia query and togglesdata-bs-theme="dark"on<body>. It applies the theme on page load and keeps it in sync if the user changes their system preference at runtime.starlette_admin/statics/css/dark-mode.css— Dark-mode styling fixes for the bundled widgets that don't provide dark variants out of the box:starlette_admin/templates/base.html— Includes the new stylesheet and script in the base template.Behavior
Files changed
starlette_admin/statics/css/dark-mode.cssstarlette_admin/statics/js/dark-mode.jsstarlette_admin/templates/base.htmlHow to test
examples/sqla).