feat: further reduce darkmode init flash (excalidraw#5701)

* feat: further reduce darkmode init flash * fix lint * tweak doc * colocate code
stvnshpd · Sep 16, 2022 · 9cccac1 · 9cccac1
1 parent 7eaf47c
commit 9cccac1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -52,6 +52,25 @@
       content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
 
+    <!------------------------------------------------------------------------->
+    <!--   to minimize white flash on load when user has dark mode enabled   -->
+    <script>
+      try {
+        //
+        const theme = window.localStorage.getItem("excalidraw-theme");
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark");
+        }
+      } catch {}
+    </script>
+    <style>
+      html.dark {
+        background-color: #121212;
+        color: #fff;
+      }
+    </style>
+    <!------------------------------------------------------------------------->
+
     <script>
       // Redirect Excalidraw+ users which have auto-redirect enabled.
       //
@@ -98,7 +117,7 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
-    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD === "true") { %>
+    <% if (process.env.REACT_APP_DEV_DISABLE_LIVE_RELOAD==="true" ) { %>
     <script>
       {
         const _WebSocket = window.WebSocket;
@@ -155,7 +174,7 @@
         width: 1px;
         overflow: hidden;
         clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap; /* added line */
+        white-space: nowrap;
         user-select: none;
       }
 

diff --git a/src/css/app.scss b/src/css/app.scss
@@ -34,6 +34,6 @@
 }
 
 .LoadingMessage--dark {
-  background-color: $oc-black;
-  color: $oc-white;
+  background-color: #121212;
+  color: #ced4da;
 }
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
@@ -524,6 +524,9 @@ const ExcalidrawWrapper = () => {
 
   useEffect(() => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_THEME, theme);
+    // currently only used for body styling during init (see public/index.html),
+    // but may change in the future
+    document.documentElement.classList.toggle("dark", theme === THEME.DARK);
   }, [theme]);
 
   const onChange = (