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 |
})() |