https://acbvi.org/js/color-modes.js

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