Fix edge case in color-modes.js (#330)

julien-deramond · web-flow · commit 4e4a378691ad · 2024-02-03T10:39:59.000+02:00
diff --git a/color-modes/js/color-modes.js b/color-modes/js/color-modes.js
@@ -20,8 +20,8 @@
   }
 
   const setTheme = theme => {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
     } else {
       document.documentElement.setAttribute('data-bs-theme', theme)
     }

Original file line number	Diff line number	Diff line change
`@@ -20,8 +20,8 @@`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`const setTheme = theme => {`
`23`		`- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {`
`24`		`- document.documentElement.setAttribute('data-bs-theme', 'dark')`
	`23`	`+ if (theme === 'auto') {`
	`24`	`+ document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))`
`25`	`25`	`} else {`
`26`	`26`	`document.documentElement.setAttribute('data-bs-theme', theme)`
`27`	`27`	`}`