From cdc1d08267515677eea879813d248d484a9e4ad8 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 7 Dec 2023 13:00:44 -0600
Subject: [PATCH] Apply color theme to HTML page itself (#2132)

---
 bskyweb/templates/base.html    | 1 +
 src/state/shell/color-mode.tsx | 1 +
 web/index.html                 | 1 +
 3 files changed, 3 insertions(+)

diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index b03fbbee..55c7c9fd 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -71,6 +71,7 @@
       overflow-y: auto;
       overscroll-behavior-y: none;
       text-rendering: optimizeLegibility;
+      background-color: var(--background);
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       -ms-overflow-style: scrollbar;
diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx
index c6a4b8a1..192b8831 100644
--- a/src/state/shell/color-mode.tsx
+++ b/src/state/shell/color-mode.tsx
@@ -23,6 +23,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   )
 
   React.useEffect(() => {
+    updateDocument(persisted.get('colorMode')) // set on load
     return persisted.onUpdate(() => {
       setState(persisted.get('colorMode'))
       updateDocument(persisted.get('colorMode'))
diff --git a/web/index.html b/web/index.html
index 1a9d63b8..18b985bf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -75,6 +75,7 @@
         overflow-y: auto;
         overscroll-behavior-y: none;
         text-rendering: optimizeLegibility;
+        background-color: var(--background);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         -ms-overflow-style: scrollbar;