Add a light/dark/auto theme selector to the create-app layout#15941
Merged
jdaugherty merged 3 commits intoJul 9, 2026
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.
codeconsole
force-pushed
the
feat/create-app-theme-selector
branch
2 times, most recently
from
f9ca048 to
ea6589b
Compare
The "Installed plugins" table header used `table-light`, a fixed light color that stayed light in dark mode and left the header illegible. Remove the color class entirely rather than swap in another shade: the header cells already carry `fw-semibold text-body-secondary` and the table draws a divider border, so the header stays legible and follows the active light/dark color mode with no fixed color. Applied to the grails-forge template and the classic web profile skeleton.
codeconsole
force-pushed
the
feat/create-app-theme-selector
branch
from
ea6589b to
7260b17
Compare
Pad the tinted namespace label bar (px-0 -> px-2) so the label no longer sits flush against the tint edge, match the controller rows to the same inset so they line up under the label, and add `list-group-item-action` so a row highlights on hover (theme-adaptive). Applied to the grails-forge template and the classic web profile skeleton.
codeconsole
force-pushed
the
feat/create-app-theme-selector
branch
from
3aeca91 to
ae0572e
Compare
✅ All tests passed ✅🏷️ Commit: ae0572e Learn more about TestLens at testlens.app. |
jdaugherty
approved these changes
Jul 9, 2026
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.
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.