Add a light/dark/auto theme selector to the create-app layout#15941
Open
codeconsole wants to merge 2 commits into
Open
Add a light/dark/auto theme selector to the create-app layout#15941codeconsole wants to merge 2 commits into
codeconsole wants to merge 2 commits into
Conversation
Add a Bootstrap 5.3 color-mode switcher to the default generated
application. A new theme.js asset persists the choice in localStorage and
toggles data-bs-theme on the document element ("auto" follows the
operating system); it is loaded in the document head so the theme is
applied before the page paints, avoiding a flash of the wrong theme. A
light/dark/auto dropdown is added to the navbar of both the grails-forge
template and the classic web profile skeleton, and theme.js is registered
as a generated asset in the grails-forge AssetPipeline feature.
This comment has been minimized.
This comment has been minimized.
The "Installed plugins" table header used the fixed `table-light` class, which stayed light in dark mode and left the header illegible. Bootstrap table cells paint their own background from `--bs-table-bg`, so a utility such as `bg-body-tertiary` on the thead is covered and shows no color; instead set `--bs-table-bg` to the theme-adaptive `--bs-tertiary-bg`. The header now follows the active light/dark color mode and matches the page's other tertiary surfaces, in both the grails-forge template and the classic web profile skeleton.
codeconsole
force-pushed
the
feat/create-app-theme-selector
branch
from
4772dcf to
f9ca048
Compare
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
1 participant
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.
Summary
Adds a Bootstrap 5.3 color-mode (light / dark / auto) switcher to the default generated application, so a freshly created app can toggle and remember its theme out of the box. The generated layout already uses theme-aware Bootstrap utilities and
grails.cssalready has[data-bs-theme=dark]rules — this wires up the missing UI + persistence.Independent of, and additive to, the i18n language-selector PR (#15940); both live in the same navbar but neither depends on the other.
Changes
New
theme.jsasset (clean-room, ASF-licensed — not a copy of Bootstrap's CC-BY docs snippet)localStorage; togglesdata-bs-themeon<html>;autofollows the OS viaprefers-color-schemeand re-resolves on OS change.DOMContentLoaded(updates the active check + toggle icon).Default layout (
grails-forgetemplate + classicwebprofile skeleton)theme.jsin the<head>so the theme is set before the page paints (no flash of the wrong theme).grails-forgeAssetPipelinefeaturetheme.jsso it is copied into the generated app'sgrails-app/assets/javascripts/.Tests
GrailsGspSpecgains a check that a generated WEB app shipstheme.js, loads it in the head, and that the navbar offers the light/dark/auto options.All green.