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>

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,