mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00
Code Issues Releases Wiki Activity

Update color-modes.js (#38626)

Browse Source 
* Update color-modes.js

Fix IF statement in the prefer-color-scheme change listener always evaluating to `true` and changing the theme to "dark" even when "light" is set as the preferred theme.

| `||` | `x !== "light"` | `x !== "dark"` | Result |
|--|:--:|:--:|:--:|
| `x = "light"` | ○ | ● | ● |
| `x = "dark"` | ● | ○ | ● |
| `x = "auto"` | ● | ● | ● |
| `x = "bogus"` | ● | ● | ● |
<hr>

| `&&` | `x !== "light"` | `x !== "dark"` | Result |
|--|:--:|:--:|:--:|
| `x = "light"` | ○ | ● | ○ |
| `x = "dark"` | ● | ○ | ○ |
| `x = "auto"` | ● | ● | ● |
| `x = "bogus"` | ● | ● | ● |

* Implement re-read of stored theme
This commit is contained in:
Jeroen Akkerman
2023-05-26 06:18:49 +02:00
committed by GitHub
parent de6b9a7933
commit f0be063c97
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
site/static/docs/5.3/assets/js/color-modes.js
View File

@@ -7,9 +7,11 @@
(() => { (() => {
'use strict' 'use strict'
const storedTheme = localStorage.getItem('theme') const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => { const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) { if (storedTheme) {
return storedTheme return storedTheme
} }
@@ -17,7 +19,7 @@
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
} }
const setTheme = function (theme) { const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark') document.documentElement.setAttribute('data-bs-theme', 'dark')
} else { } else {
@@ -56,6 +58,7 @@
} }
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' || storedTheme !== 'dark') { if (storedTheme !== 'light' || storedTheme !== 'dark') {
setTheme(getPreferredTheme()) setTheme(getPreferredTheme())
} }
@@ -68,7 +71,7 @@
.forEach(toggle => { .forEach(toggle => {
toggle.addEventListener('click', () => { toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value') const theme = toggle.getAttribute('data-bs-theme-value')
localStorage.setItem('theme', theme) setStoredTheme(theme)
setTheme(theme) setTheme(theme)
showActiveTheme(theme, true) showActiveTheme(theme, true)
}) })