From 2dc3b7662b829e7eecf040ea1cadaa133a17787f Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 9 Oct 2024 14:10:39 +0200 Subject: [PATCH 1/4] Sync dark mode on browser_info object --- panel/models/browser.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/panel/models/browser.ts b/panel/models/browser.ts index 8aa69ccb81..ac2b645971 100644 --- a/panel/models/browser.ts +++ b/panel/models/browser.ts @@ -4,12 +4,17 @@ import {Model} from "@bokehjs/model" export class BrowserInfoView extends View { declare model: BrowserInfo + _dark_mode_listener: override initialize(): void { 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) { From ba6826a47e6340b077e5db2bb7492c45ad1b08dd Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 9 Oct 2024 14:11:48 +0200 Subject: [PATCH 2/4] Apply suggestions from code review --- panel/models/browser.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/panel/models/browser.ts b/panel/models/browser.ts index ac2b645971..0c812b1814 100644 --- a/panel/models/browser.ts +++ b/panel/models/browser.ts @@ -4,7 +4,6 @@ import {Model} from "@bokehjs/model" export class BrowserInfoView extends View { declare model: BrowserInfo - _dark_mode_listener: override initialize(): void { super.initialize() @@ -13,7 +12,7 @@ export class BrowserInfoView extends View { 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 From 925e49a015d122efc0d70e811deaaac86da56e1c Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 9 Oct 2024 14:12:35 +0200 Subject: [PATCH 3/4] Apply suggestions from code review --- panel/models/browser.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/panel/models/browser.ts b/panel/models/browser.ts index 0c812b1814..7d129ed199 100644 --- a/panel/models/browser.ts +++ b/panel/models/browser.ts @@ -9,8 +9,8 @@ export class BrowserInfoView extends View { super.initialize() if (window.matchMedia != null) { - const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); - darkModeMediaQuery.addEventListener('change', (e) => { + const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") + darkModeMediaQuery.addEventListener("change", (e) => { this.model.dark_mode = e.matches }) this.model.dark_mode = darkModeMediaQuery.matches From e5eec5f7a1d58b40ada6a096f32f7ddda8419a1b Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Wed, 16 Oct 2024 15:55:29 +0200 Subject: [PATCH 4/4] Apply suggestions from code review --- panel/models/browser.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/panel/models/browser.ts b/panel/models/browser.ts index 7d129ed199..1d2b1e4b7b 100644 --- a/panel/models/browser.ts +++ b/panel/models/browser.ts @@ -11,7 +11,7 @@ export class BrowserInfoView extends View { if (window.matchMedia != null) { const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") darkModeMediaQuery.addEventListener("change", (e) => { - this.model.dark_mode = e.matches + this.model.dark_mode = e.matches }) this.model.dark_mode = darkModeMediaQuery.matches }