Set color-scheme property of :root element (luizdepra#632)

alfunx · web-flow · commit a4fb372e6be3 · 2021-12-26T15:22:40.000-03:00
By setting the color-scheme property of the :root element we get matching (dark or light) scrollbars and form controls. see: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
diff --git a/assets/js/coder.js b/assets/js/coder.js
@@ -33,6 +33,7 @@ function setTheme(theme) {
     let inverse = theme === 'dark' ? 'light' : 'dark';
     body.classList.remove('colorscheme-' + inverse);
     body.classList.add('colorscheme-' + theme);
+    document.documentElement.style['color-scheme'] = theme;
 }
 
 function rememberTheme(theme) {

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ function setTheme(theme) {`
`33`	`33`	`let inverse = theme === 'dark' ? 'light' : 'dark';`
`34`	`34`	`body.classList.remove('colorscheme-' + inverse);`
`35`	`35`	`body.classList.add('colorscheme-' + theme);`
	`36`	`+ document.documentElement.style['color-scheme'] = theme;`
`36`	`37`	`}`
`37`	`38`
`38`	`39`	`function rememberTheme(theme) {`