Add prefers-color-scheme query for theme fallback

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",

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;
   }