|
Line 0
Link Here
|
| 0 |
- |
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 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 |
})() |