Fix the dark mode on the greeting screen

Closes #4
illright · Jan 14, 2022 · 7c827c4 · 7c827c4
1 parent 700c05d
commit 7c827c4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/app.css b/src/app.css
@@ -4,19 +4,24 @@
 @tailwind utilities;
 
 :root {
-  --canvas-light-bg: #ffffff;
-  --canvas-light-fg: #000000;
+  --background-light: #ffffff;
+  --on-background-light: #000000;
 
-  --canvas-dark-bg: #22272e;
-  --canvas-dark-fg: #adbac7;
+  --background-dark: #1b1e23;
+  --on-background-dark: #b0b8c5;
 
-  --canvas-bg: var(--canvas-light-bg);
-  --canvas-fg: var(--canvas-light-fg);
+  --background: var(--background-light);
+  --on-background: var(--on-background-light);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --canvas-bg: var(--canvas-dark-bg);
-    --canvas-fg: var(--canvas-dark-fg);
+    --background: var(--background-dark);
+    --on-background: var(--on-background-dark);
   }
 }
+
+body {
+  background: var(--background);
+  color: var(--on-background);
+}
diff --git a/src/lib/features/dark-mode/model/start-media-listener.ts b/src/lib/features/dark-mode/model/start-media-listener.ts
@@ -11,14 +11,13 @@ export const startMediaListener: StartStopNotifier<Colors> = (set) => {
   const html = document.querySelector('html');
   const darkColorsMedia = window.matchMedia('(prefers-color-scheme: dark)');
 
-  function setColorsFromRoot(e: MediaQueryList | MediaQueryListEvent) {
+  function setColorsFromRoot(_e: MediaQueryList | MediaQueryListEvent) {
     if (html !== null) {
       const cssVars = getComputedStyle(html);
-      const theme = e.matches ? 'dark' : 'light';
 
       set({
-        background: cssVars.getPropertyValue(`--canvas-${theme}-bg`),
-        foreground: cssVars.getPropertyValue(`--canvas-${theme}-fg`),
+        background: cssVars.getPropertyValue('--background'),
+        foreground: cssVars.getPropertyValue('--on-background'),
       });
     }
   }