Fix white flashes on page load in dark mode

We set the class indicating that dark mode is enabled before the page is rendered (the script is called inside `<head>`). The class is now set on the `<html>` element instead of `<body>` because `document.body` is not ready yet when the script is executed.
dhall-lang · Apr 7, 2024 · 8d9b41f · 8d9b41f
1 parent 4d21a18
commit 8d9b41f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 9 deletions.
diff --git a/dhall-docs/src/Dhall/data/assets/index.css b/dhall-docs/src/Dhall/data/assets/index.css
@@ -187,7 +187,7 @@ span.of-type-token {
     color: #EBEBEB;
 }
 
-body.dark-mode {
+.dark-mode body {
     background-color: #484848;
 }
 
@@ -215,7 +215,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)