Prevent flash of wrong theme on startup (web) (#9577)

* prevent flash of wrong theme on startup

* move bg color to #root

* Update and use existing system

* Darken slightly, better contrast

---------

Co-authored-by: Eric Bailey <git@esb.lol>

bskyweb/templates/base.html

@@ -37,29 +37,20 @@
       font-style: italic;
       font-display: swap;
     }
-    html {
-      background-color: white;
+    :root {
+      --text: black;
+      --background: white;
+      --backgroundLight: #e2e7ee;
     }
     @media (prefers-color-scheme: dark) {
-      html {
-        background-color: black;
+      :root {
+        color-scheme: dark;
+        --text: white;
+        --background: black;
+        --backgroundLight: #232e3e;
       }
     }
     html,
-    body {
-      margin: 0px;
-      padding: 0px;
-      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
-      text-rendering: optimizeLegibility;
-      /* Platform-specific reset */
-      -webkit-overflow-scrolling: touch;
-      -webkit-text-size-adjust: 100%;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      -ms-overflow-style: scrollbar;
-      font-synthesis-weight: none;
-    }
-    html,
     body,
     #root {
       display: flex;
@@ -67,6 +58,32 @@
       min-height: 100%;
       width: 100%;
     }
+    html.theme--light,
+    html.theme--light body,
+    html.theme--light #root {
+      background-color: white;
+      --text: black;
+      --background: white;
+      --backgroundLight: #DCE2EA;
+    }
+    html.theme--dark,
+    html.theme--dark body,
+    html.theme--dark #root {
+      color-scheme: dark;
+      background-color: black;
+      --text: white;
+      --background: black;
+      --backgroundLight: #232E3E;
+    }
+    html.theme--dim,
+    html.theme--dim body,
+    html.theme--dim #root {
+      color-scheme: dark;
+      background-color: #151D28;
+      --text: white;
+      --background: #151D28;
+      --backgroundLight: #2C3A4E;
+    }
     #splash {
       display: flex;
       position: fixed;
@@ -93,6 +110,12 @@
       overflow-y: scroll;
     }
   </style>
+  <script>
+    const theme = localStorage.getItem('ALF_THEME')
+    if (theme) {
+      document.documentElement.classList.add(`theme--${theme}`)
+    }
+  </script>
 
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="{{ staticCDNHost }}/static/apple-touch-icon.png">

src/alf/util/useColorModeTheme.ts

@@ -51,6 +51,7 @@ function updateDocument(theme: ThemeName) {
     html.classList.add(`theme--${theme}`)
     // set color to 'theme-color' meta tag
     meta?.setAttribute('content', getBackgroundColor(theme))
+    window.localStorage.setItem('ALF_THEME', theme)
   }
 }
 

src/style.css

@@ -11,40 +11,6 @@
  *
  * HTML & BODY STYLES IN `web/index.html` and `bskyweb/templates/base.html`
  */
-:root {
-  --text: black;
-  --background: white;
-  --backgroundLight: #f9fafb;
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-    --text: white;
-    --background: black;
-    --backgroundLight: #111822;
-  }
-}
-
-html.theme--light {
-  --text: black;
-  --background: white;
-  --backgroundLight: #f9fafb;
-  background-color: white;
-}
-html.theme--dark {
-  color-scheme: dark;
-  background-color: black;
-  --text: white;
-  --background: black;
-  --backgroundLight: #111822;
-}
-html.theme--dim {
-  color-scheme: dark;
-  background-color: #151d28;
-  --text: white;
-  --background: #151d28;
-  --backgroundLight: #1c2736;
-}
 
 /* Buttons and inputs have a font set by UA, so we'll have to reset that */
 button,

web/index.html

@@ -19,6 +19,7 @@
     <title>%WEB_TITLE%</title>
 
     <link rel="preload" as="font" type="font/woff2" href="/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
+    <link rel="stylesheet" href="/static/style.css">
 
     <style>
       /**
@@ -42,14 +43,6 @@
         font-style: italic;
         font-display: swap;
       }
-      html {
-        background-color: white;
-      }
-      @media (prefers-color-scheme: dark) {
-        html {
-          background-color: black;
-        }
-      }
       html,
       body {
         margin: 0px;
@@ -64,6 +57,19 @@
         -ms-overflow-style: scrollbar;
         font-synthesis-weight: none;
       }
+      :root {
+        --text: black;
+        --background: white;
+        --backgroundLight: #e2e7ee;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          color-scheme: dark;
+          --text: white;
+          --background: black;
+          --backgroundLight: #232e3e;
+        }
+      }
       html,
       body,
       #root {
@@ -72,6 +78,32 @@
         min-height: 100%;
         width: 100%;
       }
+      html.theme--light,
+      html.theme--light body,
+      html.theme--light #root {
+        background-color: white;
+        --text: black;
+        --background: white;
+        --backgroundLight: #DCE2EA;
+      }
+      html.theme--dark,
+      html.theme--dark body,
+      html.theme--dark #root {
+        color-scheme: dark;
+        background-color: black;
+        --text: white;
+        --background: black;
+        --backgroundLight: #232E3E;
+      }
+      html.theme--dim,
+      html.theme--dim body,
+      html.theme--dim #root {
+        color-scheme: dark;
+        background-color: #151D28;
+        --text: white;
+        --background: #151D28;
+        --backgroundLight: #2C3A4E;
+      }
       #splash {
         display: flex;
         position: fixed;
@@ -98,6 +130,12 @@
         overflow-y: scroll;
       }
     </style>
+    <script>
+      const theme = localStorage.getItem('ALF_THEME')
+      if (theme) {
+        document.documentElement.classList.add(`theme--${theme}`)
+      }
+    </script>
   </head>
 
   <body>