From 0b59d530445505a8fcfa3562bab501463b1767f7 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Wed, 16 Oct 2024 10:11:48 -0400
Subject: [PATCH] Sync dark mode on browser_info object (#7382)

---
 panel/models/browser.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/panel/models/browser.ts b/panel/models/browser.ts
index 8aa69ccb81..1d2b1e4b7b 100644
--- 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) {