incorporate suggestions from code review + discussions

widgetti · Feb 9, 2024 · c964eef · c964eef
1 parent bdaa3ca
commit c964eef
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/js/src/Themes.js b/js/src/Themes.js
@@ -38,6 +38,12 @@ export class ThemeModel extends WidgetModel {
     this.on("change:dark", () => {
       this.setTheme();
     });
+
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        this.setTheme();
+      });
   }
 
   setTheme() {
@@ -50,25 +56,28 @@ export class ThemeModel extends WidgetModel {
       this.save_changes();
     } else if (document.body.classList.contains("theme-dark")) {
       vuetify.framework.theme.dark = true;
-      this.set("dark", true);
+      this.set("dark_effective", true);
       this.save_changes();
     } else if (document.body.classList.contains("theme-light")) {
-      this.set("dark", false);
+      vuetify.framework.theme.dark = false;
+      this.set("dark_effective", false);
       this.save_changes();
     } else if (window.Jupyter) {
       // Special case for Jupyter Notebook
-      this.set("dark", false);
+      vuetify.framework.theme.dark = false;
+      this.set("dark_effective", false);
       this.save_changes();
     } else if (document.body.dataset.vscodeThemeKind === "vscode-dark") {
       // Special case for VS Code
       vuetify.framework.theme.dark = true;
-      this.set("dark", true);
+      this.set("dark_effective", true);
       this.save_changes();
     } else if (document.body.dataset.vscodeThemeKind === "vscode-light") {
       vuetify.framework.theme.dark = false;
-      this.set("dark", false);
+      this.set("dark_effective", false);
       this.save_changes();
     } else if (document.documentElement.matches("[theme=dark]")) {
+      // Special case for Colab
       vuetify.framework.theme.dark = true;
       this.set("dark_effective", true);
       this.save_changes();
@@ -77,11 +86,7 @@ export class ThemeModel extends WidgetModel {
       this.set("dark_effective", false);
       this.save_changes();
     } else {
-      let osPrefersDark =
-        window.matchMedia &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches;
-      vuetify.framework.theme.dark = osPrefersDark;
-      this.set("dark_effective", osPrefersDark);
+      this.set("dark_effective", vuetify.framework.theme.dark);
       this.save_changes();
     }
   }