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