From 91866f629283b506cfeb69a5210dcd2e8fd0b1f3 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Wed, 6 Mar 2024 08:27:30 +0100
Subject: [PATCH] Add `prefers-color-scheme` query for theme fallback

---
 playwright.config.ts  | 1 +
 src/lib/appearance.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 35e0bb9be..55a1cda6d 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -16,6 +16,7 @@ const config: PlaywrightTestConfig = {
   reporter: "list",
   globalSetup: "./tests/support/globalSetup",
   use: {
+    colorScheme: "dark",
     actionTimeout: 5000,
     baseURL: "http://localhost:3001",
     trace: "retain-on-failure",
diff --git a/src/lib/appearance.ts b/src/lib/appearance.ts
index fe1a17dd2..7ad4e017b 100644
--- a/src/lib/appearance.ts
+++ b/src/lib/appearance.ts
@@ -30,10 +30,11 @@ function loadCodeFont(): CodeFont {
 }
 
 function loadTheme(): Theme {
+  const { matches } = window.matchMedia("(prefers-color-scheme: dark)");
   const storedTheme = window.localStorage.getItem("theme");
 
   if (storedTheme === null) {
-    return "dark";
+    return matches ? "dark" : "light";
   } else {
     return storedTheme as Theme;
   }