feat: improve dark detection and add dark_effective (#296)

When `dark` is None/null, we auto-detect the dark setting for Google Colab, VS Code, and Jupyter Lab, and we also set the `dark_effective` trait to the used setting.


Co-authored-by: Maarten A. Breddels <maartenbreddels@gmail.com>

docs/usage.rst

@@ -485,6 +485,18 @@ Available theme properties:
 - warning
 - anchor
 
+If :code:`dark` is set to None (the default), we use the setting from Jupyter Lab, VS Code or Google Colab.
+In Jupyter notebook classic, or other unrecognized systems we always use the light theme.
+When running in `Solara server <https://github.com/widgetti/solara/>`_, dark mode is
+determined by how the `Solara server <https://solara.dev/docs/understanding/solara-server>`_ is configured.
+
+In all cases, the `dark_effective` attribute can be used to know if the dark theme is used.
+
+.. code-block:: python
+
+    if v.theme.dark_effective:
+        ...
+
 Summary
 -------
 

ipyvuetify/Themes.py

@@ -40,7 +40,7 @@ class Theme(Widget):
 
     dark = Bool(None, allow_none=True).tag(sync=True)
 
-    dark_jlab = Bool(None, allow_none=True).tag(sync=True)
+    dark_effective = Bool(None, allow_none=True).tag(sync=True)
 
     def __init__(self):
         super().__init__()

js/src/Themes.js

@@ -13,7 +13,7 @@ export class ThemeModel extends WidgetModel {
         _view_module_version: "0.1.11",
         _model_module_version: "0.1.11",
         dark: null,
-        dark_jlab: null,
+        dark_effective: null,
       },
     };
   }
@@ -28,32 +28,64 @@ export class ThemeModel extends WidgetModel {
     if (ThemeModel.themeManager) {
       ThemeModel.themeManager.themeChanged.connect(() => {
         if (this.get("dark") === null) {
-          vuetify.framework.theme.dark =
-            document.body.dataset.jpThemeLight === "false";
-          this.set("dark_jlab", vuetify.framework.theme.dark);
+          this.set("dark_effective", vuetify.framework.theme.dark);
           this.save_changes();
         }
       }, this);
     }
+    this.setTheme();
 
+    this.on("change:dark", () => {
+      this.setTheme();
+    });
+
+    new Vue({
+      vuetify,
+      watch: {
+        "$vuetify.theme.dark": (newValue) => {
+          this.vuetifyThemeChange();
+        },
+      },
+    });
+  }
+
+  setTheme() {
     if (this.get("dark") !== null) {
       vuetify.framework.theme.dark = this.get("dark");
     } else if (document.body.dataset.jpThemeLight) {
       vuetify.framework.theme.dark =
         document.body.dataset.jpThemeLight === "false";
-      this.set("dark_jlab", vuetify.framework.theme.dark);
-      this.save_changes();
     } else if (document.body.classList.contains("theme-dark")) {
       vuetify.framework.theme.dark = true;
-      this.set("dark", true);
-      this.save_changes();
     } else if (document.body.classList.contains("theme-light")) {
-      this.set("dark", false);
+      vuetify.framework.theme.dark = false;
+    } else if (window.Jupyter) {
+      // Special case for Jupyter Notebook
+      vuetify.framework.theme.dark = false;
+    } else if (document.body.dataset.vscodeThemeKind === "vscode-dark") {
+      // Special case for VS Code
+      vuetify.framework.theme.dark = true;
+    } else if (document.body.dataset.vscodeThemeKind === "vscode-light") {
+      vuetify.framework.theme.dark = false;
+    } else if (document.documentElement.matches("[theme=dark]")) {
+      // Special case for Colab
+      vuetify.framework.theme.dark = true;
+    } else if (document.documentElement.matches("[theme=light]")) {
+      vuetify.framework.theme.dark = false;
+    }
+    this.set("dark_effective", vuetify.framework.theme.dark);
+    this.save_changes();
+  }
+
+  vuetifyThemeChange() {
+    if (
+      this.get("dark") !== null &&
+      this.get("dark") !== vuetify.framework.theme.dark
+    ) {
+      this.set("dark", vuetify.framework.theme.dark);
+      this.set("dark_effective", vuetify.framework.theme.dark);
       this.save_changes();
     }
-    this.on("change:dark", () => {
-      vuetify.framework.theme.dark = this.get("dark");
-    });
   }
 }