gitch

1
/*!
2
 * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
3
 * Copyright 2011-2024 The Bootstrap Authors
4
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
5
 */
6

7
(() => {
8
    'use strict'
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 '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
  })()