Revamp how we're doing themes in docs to be more instant

Author: mdo

site/src/assets/application.js

@@ -10,11 +10,13 @@
 import sidebarScroll from './partials/sidebar.js'
 import snippets from './partials/snippets.js'
 import stickyNav from './partials/sticky.js'
+import theme from './partials/theme.js'
 import tocDrawer from './partials/toc.js'
 
 export default () => {
   sidebarScroll()
   snippets()
   stickyNav()
+  theme()
   tocDrawer()
 }

site/src/assets/partials/theme.js

@@ -0,0 +1,28 @@
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2026 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+import { Menu } from '@bootstrap'
+
+export default () => {
+  const themeSwitcher = document.getElementById('bd-theme')
+
+  if (!themeSwitcher) {
+    return
+  }
+
+  document.addEventListener('click', event => {
+    const toggle = event.target.closest('[data-bs-theme-value]')
+
+    if (!toggle) {
+      return
+    }
+
+    Menu.getOrCreateInstance(themeSwitcher).hide()
+  }, true)
+}

site/src/libs/highlight.ts

@@ -58,6 +58,7 @@ export async function highlightCode(
       light: { ...(bootstrapLight as any), name: '' },
       dark: { ...(bootstrapDark as any), name: '' }
     },
+    defaultColor: 'light-dark()',
     transformers
   })
 

site/src/scss/_syntax.scss

@@ -39,17 +39,8 @@
   background-color: color-mix(in oklch, var(--primary-bg) 10%, transparent);
 }
 
-// Dark mode theming for Shiki
-// When using dual themes, Shiki generates inline styles with CSS variables
-// We need to switch from the light theme vars to dark theme vars
 [data-bs-theme="dark"] {
   --shell-prompt-color: #868e96;
-
-  .astro-code span,
-  .astro-code-themes span {
-    // Override Shiki's inline color with the dark theme color
-    color: var(--shiki-dark) !important; // stylelint-disable-line declaration-no-important
-  }
 }
 
 // Shell prompts - these work with Shiki's transformer that adds .line class

site/static/docs/[version]/assets/js/color-modes.js

@@ -19,11 +19,19 @@
     return 'auto'
   }
 
-  const setTheme = theme => {
+  const resolveTheme = theme => {
     if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    return theme
+  }
+
+  const setTheme = theme => {
+    const resolved = resolveTheme(theme)
+
+    if (document.documentElement.getAttribute('data-bs-theme') !== resolved) {
+      document.documentElement.setAttribute('data-bs-theme', resolved)
     }
   }
 
@@ -70,8 +78,11 @@
         toggle.addEventListener('click', () => {
           const theme = toggle.getAttribute('data-bs-theme-value')
           setStoredTheme(theme)
-          setTheme(theme)
-          showActiveTheme(theme, true)
+
+          requestAnimationFrame(() => {
+            setTheme(theme)
+            showActiveTheme(theme)
+          })
         })
       })
   })