nmode's Git Repositories - Rnaught/blob - lightswitch.js

   1
   2 /*!
   3  * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
   4  * Copyright 2011-2023 The Bootstrap Authors
   5  * Licensed under the Creative Commons Attribution 3.0 Unported License.
   6  * Updates for {pkgdown} by the {bslib} authors, also licensed under CC-BY-3.0.
   7  */
   8
   9 const getStoredTheme = () => localStorage.getItem('theme')
  10 const setStoredTheme = theme => localStorage.setItem('theme', theme)
  11
  12 const getPreferredTheme = () => {
  13   const storedTheme = getStoredTheme()
  14   if (storedTheme) {
  15     return storedTheme
  16   }
  17
  18   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  19 }
  20
  21 const setTheme = theme => {
  22   if (theme === 'auto') {
  23     document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
  24   } else {
  25     document.documentElement.setAttribute('data-bs-theme', theme)
  26   }
  27 }
  28
  29 function bsSetupThemeToggle () {
  30   'use strict'
  31
  32   const showActiveTheme = (theme, focus = false) => {
  33     var activeLabel, activeIcon;
  34
  35     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
  36       const buttonTheme = element.getAttribute('data-bs-theme-value')
  37       const isActive = buttonTheme == theme
  38
  39       element.classList.toggle('active', isActive)
  40       element.setAttribute('aria-pressed', isActive)
  41
  42       if (isActive) {
  43         activeLabel = element.textContent;
  44         activeIcon = element.querySelector('span').classList.value;
  45       }
  46     })
  47
  48     const themeSwitcher = document.querySelector('#dropdown-lightswitch')
  49     if (!themeSwitcher) {
  50       return
  51     }
  52
  53     themeSwitcher.setAttribute('aria-label', activeLabel)
  54     themeSwitcher.querySelector('span').classList.value = activeIcon;
  55
  56     if (focus) {
  57       themeSwitcher.focus()
  58     }
  59   }
  60
  61   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  62     const storedTheme = getStoredTheme()
  63     if (storedTheme !== 'light' && storedTheme !== 'dark') {
  64       setTheme(getPreferredTheme())
  65     }
  66   })
  67
  68   window.addEventListener('DOMContentLoaded', () => {
  69     showActiveTheme(getPreferredTheme())
  70
  71     document
  72       .querySelectorAll('[data-bs-theme-value]')
  73       .forEach(toggle => {
  74         toggle.addEventListener('click', () => {
  75           const theme = toggle.getAttribute('data-bs-theme-value')
  76           setTheme(theme)
  77           setStoredTheme(theme)
  78           showActiveTheme(theme, true)
  79         })
  80       })
  81   })
  82 }
  83
  84 setTheme(getPreferredTheme());
  85 bsSetupThemeToggle();