src/color-mode-toggler.js

   1 /*!
   2  * https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript
   3  *
   4  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
   5  * Copyright 2011-2025 The Bootstrap Authors
   6  * Licensed under the Creative Commons Attribution 3.0 Unported License.
   7  */
   8
   9 (() => {
  10   const getStoredTheme = () => localStorage.getItem('theme')
  11   const setStoredTheme = theme => localStorage.setItem('theme', theme)
  12
  13   const getPreferredTheme = () => {
  14     const storedTheme = getStoredTheme()
  15     if (storedTheme) {
  16       return storedTheme
  17     }
  18
  19     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  20   }
  21
  22   const setTheme = theme => {
  23     if (theme === 'auto') {
  24       document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
  25     } else {
  26       document.documentElement.setAttribute('data-bs-theme', theme)
  27     }
  28   }
  29
  30   setTheme(getPreferredTheme())
  31
  32   const showActiveTheme = (theme, focus = false) => {
  33     const themeSwitcher = document.querySelector('#bd-theme')
  34
  35     if (!themeSwitcher) {
  36       return
  37     }
  38
  39     const themeSwitcherText = document.querySelector('#bd-theme-text')
  40     // const activeThemeIcon = document.querySelector('.theme-icon-active use')
  41     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
  42     // const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
  43
  44     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
  45       element.classList.remove('active')
  46       element.setAttribute('aria-pressed', 'false')
  47     })
  48
  49     btnToActive.classList.add('active')
  50     btnToActive.setAttribute('aria-pressed', 'true')
  51     // activeThemeIcon.setAttribute('href', svgOfActiveBtn)
  52     const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
  53     themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
  54
  55     if (focus) {
  56       themeSwitcher.focus()
  57     }
  58   }
  59
  60   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  61     const storedTheme = getStoredTheme()
  62     if (storedTheme !== 'light' && storedTheme !== 'dark') {
  63       setTheme(getPreferredTheme())
  64     }
  65   })
  66
  67   window.addEventListener('DOMContentLoaded', () => {
  68     showActiveTheme(getPreferredTheme())
  69
  70     document.querySelectorAll('[data-bs-theme-value]')
  71       .forEach(toggle => {
  72         toggle.addEventListener('click', () => {
  73           const theme = toggle.getAttribute('data-bs-theme-value')
  74           setStoredTheme(theme)
  75           setTheme(theme)
  76           showActiveTheme(theme, true)
  77         })
  78       })
  79   })
  80 })()