Add support for dark/light theme based on user's preferred color scheme

Author: sisp

docs/options.md

@@ -23,7 +23,7 @@ You can customize the plugin by setting options in `mkdocs.yml`. For example:
 
 - `vega_width` (default is `container`). When not specified explicitly in the JSON schema, the `width` to use (see [vegalite customizing size](https://vega.github.io/vega-lite/docs/size.html)). When set to `container` width will be 100%.
 - `vega_theme` (default is `default`). Specify one of the available [vegalite themes](https://vega.github.io/vega-themes/).
-- `vega_theme_dark` (default is `dark`). When using the [mkdocs-material](https://squidfunk.github.io/mkdocs-material) theme with a dark mode, automatically render charts using this theme. Dark mode toggle is also supported. Specify one of the available [vegalite themes](https://vega.github.io/vega-themes/).
+- `vega_theme_dark` (default is `dark`). When using the [mkdocs-material](https://squidfunk.github.io/mkdocs-material) theme with a dark mode or the user's preferred color scheme in the browser or OS is "dark", automatically render charts using this theme. Dark mode toggle is also supported. Specify one of the available [vegalite themes](https://vega.github.io/vega-themes/).
 - `vega_renderer` (default is `svg`). Specify one of the available [vegalite renderers](https://vega.github.io/vega-themes/).
 - `use_data_path` (default is `True`). When `True`, any relative urls used in the JSON schema are relative to the `data_path`. When `False`, relative urls should be relative to the URL of the page.
 - `data_path` (default is `""`). When `use_data_path` is enabled, the base path relative to the `docs/` folder.

mkdocs_charts_plugin/js/mkdocs-charts-plugin.js

@@ -132,6 +132,12 @@ function getTheme() {
             ? mkdocs_chart_plugin['vega_theme_dark']
             : mkdocs_chart_plugin['vega_theme'];
     }
+    // Get theme according to user's preferred color scheme on the browser or OS
+    if (window.matchMedia) {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? mkdocs_chart_plugin['vega_theme_dark']
+            : mkdocs_chart_plugin['vega_theme'];
+    }
     // Fall back to light theme
     return mkdocs_chart_plugin['vega_theme'];
 }
@@ -227,6 +233,17 @@ const chartplugin = className => {
     }
   }
 
+function updateCharts() {
+    const theme = getTheme();
+    for (let i = 0; i < vegalite_charts.length; i++) {
+        vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
+            actions: false,
+            theme,
+            "renderer": mkdocs_chart_plugin['vega_renderer']
+        });
+    }
+}
+
 // mkdocs-material has a dark mode including a toggle
 // We should watch when dark mode changes and update charts accordingly
 
@@ -235,16 +252,7 @@ var observer = new MutationObserver(function(mutations) {
       if (mutation.type === "attributes") {
 
         if (mutation.attributeName == "data-md-color-scheme") {
-
-            const theme = getTheme();
-            for (let i = 0; i < vegalite_charts.length; i++) {
-                vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
-                    actions: false,
-                    theme,
-                    "renderer": mkdocs_chart_plugin['vega_renderer']
-                });
-            }
-
+            updateCharts();
         }
 
       }
@@ -254,6 +262,13 @@ observer.observe(bodyelement, {
 attributes: true //configure it to listen to attribute changes
 });
 
+// Watch for user's preferred color scheme changes and update charts accordingly
+if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        updateCharts();
+    });
+}
+
 // Load when DOM ready
 if (typeof document$ !== "undefined") {
     // compatibility with mkdocs-material's instant loading feature