Sync dark mode on browser_info object (#7382)

holoviz · Oct 16, 2024 · 0b59d53 · 0b59d53
1 parent 0bb5cd3
commit 0b59d53
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/panel/models/browser.ts b/panel/models/browser.ts
@@ -9,7 +9,11 @@ export class BrowserInfoView extends View {
     super.initialize()
 
     if (window.matchMedia != null) {
-      this.model.dark_mode = window.matchMedia("(prefers-color-scheme: dark)").matches
+      const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+      darkModeMediaQuery.addEventListener("change", (e) => {
+        this.model.dark_mode = e.matches
+      })
+      this.model.dark_mode = darkModeMediaQuery.matches
     }
     this.model.device_pixel_ratio = window.devicePixelRatio
     if (navigator != null) {