https://monogame.net/js/themeSwitcher.js

1(() => {
2    'use strict'
3
4    const getStoredTheme = () => localStorage.getItem('theme')
5    const setStoredTheme = theme => localStorage.setItem('theme', theme)
6
7    const getPreferredTheme = () => {
8        const storedTheme = getStoredTheme()
9        if (storedTheme) {
10            return storedTheme
11        }
12
13        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
14    }
15
16    const setTheme = theme => {
17        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
18            document.documentElement.setAttribute('data-bs-theme', 'dark')
19        } else {
20            document.documentElement.setAttribute('data-bs-theme', theme)
21        }
22    }
23
24    setTheme(getPreferredTheme())
25
26    const showActiveTheme = (theme, focus = false) => {
27        const themeSwitcher = document.querySelector('#bd-theme')
28
29        if (!themeSwitcher) {
30            return
31        }
32
33        const themeSwitcherText = document.querySelector('#bd-theme-text')
34        const activeThemeIcon = document.querySelector('#active-theme-icon')
35        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
36        const classOfActiveIcon = btnToActive.querySelector('i').getAttribute('class')
37
38        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
39            element.classList.remove('active')
40            element.setAttribute('aria-pressed', 'false')
41        })
42
43        btnToActive.classList.add('active')
44        btnToActive.setAttribute('aria-pressed', 'true')
45        activeThemeIcon.setAttribute('class', classOfActiveIcon);
46        const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
47        themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
48
49        if (focus) {
50            themeSwitcher.focus()
51        }
52    }
53
54    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
55        const storedTheme = getStoredTheme()
56        if (storedTheme !== 'light' && storedTheme !== 'dark') {
57            setTheme(getPreferredTheme())
58        }
59    })
60
61    window.addEventListener('DOMContentLoaded', () => {
62        showActiveTheme(getPreferredTheme())
63
64        document.querySelectorAll('[data-bs-theme-value]')
65            .forEach(toggle => {
66                toggle.addEventListener('click', () => {
67                    const theme = toggle.getAttribute('data-bs-theme-value')
68                    setStoredTheme(theme)
69                    setTheme(theme)
70                    showActiveTheme(theme, true)
71                })
72            })
73    })
74})()