From 7afda4aa3743381838c74baae58bb0a3ff0cf4e8 Mon Sep 17 00:00:00 2001
From: Lelouch He <lelouchhe@gmail.com>
Date: Fri, 21 Nov 2025 06:46:25 -0800
Subject: [PATCH] Follow the system theme automatically when dark mode toggle
 was not set before (#1696)

* follow browser theme unless darkmode was set before

* trigger workflow
---
 client/editor_ui.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/editor_ui.tsx b/client/editor_ui.tsx
index 69f32430..31bb2209 100644
--- a/client/editor_ui.tsx
+++ b/client/editor_ui.tsx
@@ -99,14 +99,27 @@ export class MainUI {
     }, [viewState.uiOptions.vimMode]);
 
     useEffect(() => {
-      const darkMode = viewState.uiOptions.darkMode === undefined
-        ? globalThis.matchMedia("(prefers-color-scheme: dark)").matches
-        : viewState.uiOptions.darkMode;
+      const updateTheme = () => {
+        const darkMode = viewState.uiOptions.darkMode === undefined
+          ? globalThis.matchMedia("(prefers-color-scheme: dark)").matches
+          : viewState.uiOptions.darkMode;
 
-      document.documentElement.dataset.theme = darkMode ? "dark" : "light";
+        document.documentElement.dataset.theme = darkMode ? "dark" : "light";
 
-      if (this.client.isDocumentEditor()) {
-        this.client.documentEditor.updateTheme();
+        if (this.client.isDocumentEditor()) {
+          this.client.documentEditor.updateTheme();
+        }
+      };
+
+      updateTheme();
+
+      if (viewState.uiOptions.darkMode === undefined) {
+        const mediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)");
+        mediaQuery.addEventListener("change", updateTheme);
+
+        return () => {
+          mediaQuery.removeEventListener("change", updateTheme);
+        };
       }
     }, [viewState.uiOptions.darkMode]);