From 9cccac1458c8ff6b79452305cbbed7032522f18b Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Fri, 16 Sep 2022 17:12:24 +0200
Subject: [PATCH] feat: further reduce darkmode init flash (#5701)

* feat: further reduce darkmode init flash

* fix lint

* tweak doc

* colocate code
---
 public/index.html            | 23 +++++++++++++++++++++--
 src/css/app.scss             |  4 ++--
 src/excalidraw-app/index.tsx |  3 +++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 0c576a29211b..4a4602b7040a 100644
--- 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
index 9d7fc81951a0..62e5d4699d7b 100644
--- 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
index 25f758f30be7..fbc784214c61 100644
--- 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 = (