Fix white flashes on page load in dark mode (#2574)

kukimik · web-flow · commit ec5016854bf5 · 2024-04-12T15:18:46.000+02:00
We set the class indicating that dark mode is
enabled before the page is rendered (the script
is called inside `&lt;head&gt;`). The class is now
set on the `&lt;html&gt;` element instead of `&lt;body&gt;`
because `document.body` is not ready yet when
the script is executed.
diff --git a/dhall-docs/src/Dhall/data/assets/index.css b/dhall-docs/src/Dhall/data/assets/index.css
@@ -194,7 +194,7 @@ span.of-type-token {
     color: #EBEBEB;
 }
 
-body.dark-mode {
+.dark-mode body {
     background-color: #484848;
 }
 
@@ -222,7 +222,6 @@ body.dark-mode {
     color: #D4D4D4;
 }
 
-
 .dark-mode a.copy-to-clipboard {
     color: #bdbdbd !important;
 }
diff --git a/dhall-docs/src/Dhall/data/assets/index.js b/dhall-docs/src/Dhall/data/assets/index.js
@@ -2,16 +2,15 @@ const DARK_MODE_OPT = 'dark-mode'
 const DARK_MODE_ACTIVE = 'dark-mode-active'
 const DARK_MODE_INACTIVE = 'dark-mode-inactive'
 
+if (localStorage.getItem(DARK_MODE_OPT) == DARK_MODE_ACTIVE) {
+  document.documentElement.classList.add('dark-mode')
+}
+
 function onReady() {
-  if (localStorage.getItem(DARK_MODE_OPT) == DARK_MODE_ACTIVE) {
-    document.body.classList.add('dark-mode')
-  } else {
-    document.body.classList.remove('dark-mode')
-  }
   document.getElementById('switch-light-dark-mode')
     .addEventListener('click', () => {
-      document.body.classList.toggle('dark-mode')
-      if (document.body.classList.contains('dark-mode')) {
+      document.documentElement.classList.toggle('dark-mode')
+      if (document.documentElement.classList.contains('dark-mode')) {
         localStorage.setItem(DARK_MODE_OPT, DARK_MODE_ACTIVE)
       } else {
         localStorage.setItem(DARK_MODE_OPT, DARK_MODE_INACTIVE)

Original file line number	Diff line number	Diff line change
`@@ -194,7 +194,7 @@ span.of-type-token {`
`194`	`194`	`color: #EBEBEB;`
`195`	`195`	`}`
`196`	`196`
`197`		`-body.dark-mode {`
	`197`	`+.dark-mode body {`
`198`	`198`	`background-color: #484848;`
`199`	`199`	`}`
`200`	`200`
`@@ -222,7 +222,6 @@ body.dark-mode {`
`222`	`222`	`color: #D4D4D4;`
`223`	`223`	`}`
`224`	`224`
`225`		`-`
`226`	`225`	`.dark-mode a.copy-to-clipboard {`
`227`	`226`	`color: #bdbdbd !important;`
`228`	`227`	`}`