apache · jdaugherty · Jul 9, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
diff --git a/...grails-forge-core/src/main/java/org/grails/forge/feature/assetPipeline/AssetPipeline.java b/...grails-forge-core/src/main/java/org/grails/forge/feature/assetPipeline/AssetPipeline.java
@@ -105,6 +105,7 @@ public void apply(GeneratorContext generatorContext) {
                 "grails-app/assets/images/spring-boot.svg",
 
                 "grails-app/assets/javascripts/application.js",
+                "grails-app/assets/javascripts/theme.js",
                 "grails-app/assets/javascripts/welcome.js",
 
                 "grails-app/assets/stylesheets/application.css",

diff --git a/grails-forge/grails-forge-core/src/main/resources/assets/javascripts/theme.js b/grails-forge/grails-forge-core/src/main/resources/assets/javascripts/theme.js
@@ -0,0 +1,75 @@
+/*
+ *  Licensed to the Apache Software Foundation (ASF) under one
+ *  or more contributor license agreements.  See the NOTICE file
+ *  distributed with this work for additional information
+ *  regarding copyright ownership.  The ASF licenses this file
+ *  to you under the Apache License, Version 2.0 (the
+ *  "License"); you may not use this file except in compliance
+ *  with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing,
+ *  software distributed under the License is distributed on an
+ *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ *  KIND, either express or implied.  See the License for the
+ *  specific language governing permissions and limitations
+ *  under the License.
+ */
+
+// Light / dark / auto color-mode switcher for Bootstrap 5.3's `data-bs-theme`.
+// The preference is persisted in localStorage; "auto" follows the operating system.
+// This file is loaded in the document <head> so the theme is applied before the
+// page paints, avoiding a flash of the wrong theme.
+(() => {
+    'use strict'
+
+    const STORAGE_KEY = 'theme'
+    const prefersDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+    const storedTheme = () => localStorage.getItem(STORAGE_KEY)
+    const preferredTheme = () => storedTheme() || 'auto'
+    const icons = { light: 'bi-sun-fill', dark: 'bi-moon-stars-fill', auto: 'bi-circle-half' }
+
+    const applyTheme = theme => {
+        const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme
+        document.documentElement.setAttribute('data-bs-theme', resolved)
+    }
+
+    // Apply immediately (before DOMContentLoaded) to avoid a flash of the wrong theme.
+    applyTheme(preferredTheme())
+
+    const showActiveTheme = theme => {
+        document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
+            const active = button.getAttribute('data-bs-theme-value') === theme
+            button.classList.toggle('active', active)
+            button.setAttribute('aria-pressed', String(active))
+            const check = button.querySelector('.bi-check')
+            if (check) {
+                check.classList.toggle('d-none', !active)
+            }
+        })
+        document.querySelectorAll('.theme-icon-active').forEach(icon => {
+            Object.values(icons).forEach(cls => icon.classList.remove(cls))
+            icon.classList.add(icons[theme] || icons.auto)
+        })
+    }
+
+    // Re-resolve "auto" when the OS preference changes.
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (preferredTheme() === 'auto') {
+            applyTheme('auto')
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(preferredTheme())
+        document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
+            button.addEventListener('click', () => {
+                const theme = button.getAttribute('data-bs-theme-value')
+                localStorage.setItem(STORAGE_KEY, theme)
+                applyTheme(theme)
+                showActiveTheme(theme)
+            })
+        })
+    })
+})()
diff --git a/grails-forge/grails-forge-core/src/main/resources/gsp/index.gsp b/grails-forge/grails-forge-core/src/main/resources/gsp/index.gsp
@@ -216,7 +216,7 @@
 
                         <g:each var="nsEntry" in="${controllersByNamespace}" status="nsIndex">
                             <div class="${nsIndex > 0 ? 'mt-4' : ''}">
-                                <div class="px-0 py-2 bg-body-tertiary">
+                                <div class="px-2 py-2 bg-body-tertiary">
                                     <div class="d-flex align-items-center justify-content-between">
                                         <div class="small text-uppercase text-body-secondary fw-semibold"
                                              style="letter-spacing: .04em;">
@@ -240,7 +240,7 @@
                                         <g:set var="controllerUrl"
                                                value="${createLink(controller: c.logicalPropertyName, namespace: c.namespace)}"/>
 
-                                        <li class="list-group-item px-0">
+                                        <li class="list-group-item list-group-item-action px-2">
                                             <div class="d-flex align-items-center justify-content-between gap-3">
                                                 <g:link controller="${c.logicalPropertyName}"
                                                         namespace="${c.namespace}"
@@ -279,7 +279,7 @@
 
                         <div class="table-responsive">
                             <table class="table table-sm table-striped table-hover" data-sortable="true">
-                                <thead class="table-light small">
+                                <thead class="small">
                                 <tr>
                                     <th scope="col"
                                         class="text-body-secondary ps-0 fw-semibold sortable"

diff --git a/grails-forge/grails-forge-core/src/main/resources/gsp/main.gsp b/grails-forge/grails-forge-core/src/main/resources/gsp/main.gsp
@@ -6,6 +6,7 @@
     <title><g:layoutTitle default="Grails"/></title>
     <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
     <asset:stylesheet src="application.css"/>
+    <asset:javascript src="theme.js"/>
     <g:layoutHead/>
 </head>
 
@@ -16,6 +17,31 @@
         <a class="navbar-brand d-flex align-items-center" href="${request.contextPath}/">
             <asset:image class="w-75" src="grails.svg" alt="Grails Logo"/>
         </a>
+        <ul class="navbar-nav ms-auto">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme">
+                    <i class="bi bi-circle-half theme-icon-active"></i>
+                    <span class="d-lg-none ms-2">Toggle theme</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                            <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                            <i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
+                            <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                </ul>
+            </li>
+        </ul>
     </div>
 </nav>
 

diff --git a/...orge/grails-forge-core/src/test/groovy/org/grails/forge/feature/view/GrailsGspSpec.groovy b/...orge/grails-forge-core/src/test/groovy/org/grails/forge/feature/view/GrailsGspSpec.groovy
@@ -81,6 +81,26 @@ class GrailsGspSpec extends ApplicationContextSpec implements CommandOutputFixtu
         output.containsKey("grails-app/views/notFound.gsp")
     }
 
+    void "test default layout includes the light/dark/auto theme selector"() {
+        when:
+        final def output = generate(ApplicationType.WEB, new Options(DevelopmentReloading.DEVTOOLS))
+        final String layout = output["grails-app/views/layouts/main.gsp"]
+
+        then: "the theme switcher script is shipped and loaded in the head to avoid a flash of the wrong theme"
+        output.containsKey("grails-app/assets/javascripts/theme.js")
+        layout.contains('<asset:javascript src="theme.js"/>')
+
+        and: "the navbar offers light, dark and auto options"
+        layout.contains('data-bs-theme-value="light"')
+        layout.contains('data-bs-theme-value="dark"')
+        layout.contains('data-bs-theme-value="auto"')
+
+        and: "the plugins table header does not force a fixed light background (stays theme-adaptive)"
+        final String index = output["grails-app/views/index.gsp"]
+        !index.contains('table-light')
+        index.contains('<thead class="small">')
+    }
+
     @Unroll
     void "test grails-gsp gradle plugins and dependencies are present for #applicationType application"() {
         when:

diff --git a/grails-profiles/web/skeleton/grails-app/assets/javascripts/theme.js b/grails-profiles/web/skeleton/grails-app/assets/javascripts/theme.js
@@ -0,0 +1,75 @@
+/*
+ *  Licensed to the Apache Software Foundation (ASF) under one
+ *  or more contributor license agreements.  See the NOTICE file
+ *  distributed with this work for additional information
+ *  regarding copyright ownership.  The ASF licenses this file
+ *  to you under the Apache License, Version 2.0 (the
+ *  "License"); you may not use this file except in compliance
+ *  with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing,
+ *  software distributed under the License is distributed on an
+ *  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ *  KIND, either express or implied.  See the License for the
+ *  specific language governing permissions and limitations
+ *  under the License.
+ */
+
+// Light / dark / auto color-mode switcher for Bootstrap 5.3's `data-bs-theme`.
+// The preference is persisted in localStorage; "auto" follows the operating system.
+// This file is loaded in the document <head> so the theme is applied before the
+// page paints, avoiding a flash of the wrong theme.
+(() => {
+    'use strict'
+
+    const STORAGE_KEY = 'theme'
+    const prefersDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+    const storedTheme = () => localStorage.getItem(STORAGE_KEY)
+    const preferredTheme = () => storedTheme() || 'auto'
+    const icons = { light: 'bi-sun-fill', dark: 'bi-moon-stars-fill', auto: 'bi-circle-half' }
+
+    const applyTheme = theme => {
+        const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme
+        document.documentElement.setAttribute('data-bs-theme', resolved)
+    }
+
+    // Apply immediately (before DOMContentLoaded) to avoid a flash of the wrong theme.
+    applyTheme(preferredTheme())
+
+    const showActiveTheme = theme => {
+        document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
+            const active = button.getAttribute('data-bs-theme-value') === theme
+            button.classList.toggle('active', active)
+            button.setAttribute('aria-pressed', String(active))
+            const check = button.querySelector('.bi-check')
+            if (check) {
+                check.classList.toggle('d-none', !active)
+            }
+        })
+        document.querySelectorAll('.theme-icon-active').forEach(icon => {
+            Object.values(icons).forEach(cls => icon.classList.remove(cls))
+            icon.classList.add(icons[theme] || icons.auto)
+        })
+    }
+
+    // Re-resolve "auto" when the OS preference changes.
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (preferredTheme() === 'auto') {
+            applyTheme('auto')
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(preferredTheme())
+        document.querySelectorAll('[data-bs-theme-value]').forEach(button => {
+            button.addEventListener('click', () => {
+                const theme = button.getAttribute('data-bs-theme-value')
+                localStorage.setItem(STORAGE_KEY, theme)
+                applyTheme(theme)
+                showActiveTheme(theme)
+            })
+        })
+    })
+})()
diff --git a/grails-profiles/web/skeleton/grails-app/views/index.gsp b/grails-profiles/web/skeleton/grails-app/views/index.gsp
@@ -216,7 +216,7 @@
 
                         <g:each var="nsEntry" in="${controllersByNamespace}" status="nsIndex">
                             <div class="${nsIndex > 0 ? 'mt-4' : ''}">
-                                <div class="px-0 py-2 bg-body-tertiary">
+                                <div class="px-2 py-2 bg-body-tertiary">
                                     <div class="d-flex align-items-center justify-content-between">
                                         <div class="small text-uppercase text-body-secondary fw-semibold"
                                              style="letter-spacing: .04em;">
@@ -240,7 +240,7 @@
                                         <g:set var="controllerUrl"
                                                value="${createLink(controller: c.logicalPropertyName, namespace: c.namespace)}"/>
 
-                                        <li class="list-group-item px-0">
+                                        <li class="list-group-item list-group-item-action px-2">
                                             <div class="d-flex align-items-center justify-content-between gap-3">
                                                 <g:link controller="${c.logicalPropertyName}"
                                                         namespace="${c.namespace}"
@@ -279,7 +279,7 @@
 
                         <div class="table-responsive">
                             <table class="table table-sm table-striped table-hover" data-sortable="true">
-                                <thead class="table-light small">
+                                <thead class="small">
                                 <tr>
                                     <th scope="col"
                                         class="text-body-secondary ps-0 fw-semibold sortable"

diff --git a/grails-profiles/web/skeleton/grails-app/views/layouts/main.gsp b/grails-profiles/web/skeleton/grails-app/views/layouts/main.gsp
@@ -6,6 +6,7 @@
     <title><g:layoutTitle default="Grails"/></title>
     <asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
     <asset:stylesheet src="application.css"/>
+    <asset:javascript src="theme.js"/>
     <g:layoutHead/>
 </head>
 
@@ -16,6 +17,31 @@
         <a class="navbar-brand d-flex align-items-center" href="${request.contextPath}/">
             <asset:image class="w-75" src="grails.svg" alt="Grails Logo"/>
         </a>
+        <ul class="navbar-nav ms-auto">
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Toggle theme">
+                    <i class="bi bi-circle-half theme-icon-active"></i>
+                    <span class="d-lg-none ms-2">Toggle theme</span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                            <i class="bi bi-sun-fill me-2"></i>Light<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
+                            <i class="bi bi-moon-stars-fill me-2"></i>Dark<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
+                            <i class="bi bi-circle-half me-2"></i>Auto<i class="bi bi-check ms-auto d-none"></i>
+                        </button>
+                    </li>
+                </ul>
+            </li>
+        </ul>
     </div>
 </nav>