Add support for custom light/dark schemes

docs/options.md

@@ -13,6 +13,8 @@ You can customize the plugin by setting options in `mkdocs.yml`. For example:
         vega_renderer: svg
         use_data_path: True
         data_path: ""
+        scheme: light
+        scheme_dark: dark
   ```
 
 - `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%.
@@ -21,4 +23,6 @@ You can customize the plugin by setting options in `mkdocs.yml`. For example:
 - `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.
+- `scheme` (default is `default`). When using the [mkdocs-material](https://squidfunk.github.io/mkdocs-material) theme, specify the light [color scheme](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-scheme).
+- `scheme_dark` (default is `slate`). When using the [mkdocs-material](https://squidfunk.github.io/mkdocs-material) theme, specify the dark [color scheme](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-scheme).
 

mkdocs_charts_plugin/js/mkdocs-charts-plugin.js

@@ -109,6 +109,14 @@ function updateURL(url) {
     return url;
 }
 
+function getTheme() {
+    var themes = {
+        [mkdocs_chart_plugin['scheme']]: mkdocs_chart_plugin['vega_theme'],
+        [mkdocs_chart_plugin['scheme_dark']]: mkdocs_chart_plugin['vega_theme_dark']
+    };
+    return themes[document.querySelector('body').getAttribute('data-md-color-scheme')] || mkdocs_chart_plugin['vega_theme'];
+}
+
 var vegalite_charts = [];
 
 function embedChart(block, schema) {
@@ -167,14 +175,10 @@ function embedChart(block, schema) {
     // in a different theme
     vegalite_charts.push({'block' : block, 'schema': schema});
 
-    // mkdocs-material has a dark mode
-    // detect which one is being used
-    var theme = (document.querySelector('body').getAttribute('data-md-color-scheme') == 'slate') ? mkdocs_chart_plugin['vega_theme_dark'] : mkdocs_chart_plugin['vega_theme'];
-
     // Render the chart
     vegaEmbed(block, schema, {
         actions: false, 
-        "theme": theme, 
+        "theme": getTheme(),
         "renderer": mkdocs_chart_plugin['vega_renderer']
     });
 }
@@ -210,14 +214,13 @@ const chartplugin = className => {
 // mkdocs-material has a dark mode including a toggle
 // We should watch when dark mode changes and update charts accordingly
 
-var bodyelement = document.querySelector('body');
 var observer = new MutationObserver(function(mutations) {
     mutations.forEach(function(mutation) {
       if (mutation.type === "attributes") {
 
         if (mutation.attributeName == "data-md-color-scheme") {
 
-            var theme = (bodyelement.getAttribute('data-md-color-scheme') == 'slate') ? mkdocs_chart_plugin['vega_theme_dark'] : mkdocs_chart_plugin['vega_theme'];
+            var theme = getTheme();
             for (let i = 0; i < vegalite_charts.length; i++) {
                 vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
                     actions: false, 
@@ -230,7 +233,7 @@ var observer = new MutationObserver(function(mutations) {
       }
     });
   });
-observer.observe(bodyelement, {
+observer.observe(document.querySelector('body'), {
 attributes: true //configure it to listen to attribute changes
 });
 

mkdocs_charts_plugin/plugin.py

@@ -26,6 +26,8 @@ class ChartsPlugin(BasePlugin):
     config_scheme = (
         ("data_path", config_options.Type(str, default="")),
         ("use_data_path", config_options.Type(bool, default=True)),
+        ("scheme", config_options.Type(str, default="default")),
+        ("scheme_dark", config_options.Type(str, default="slate")),
         ("vega_theme", config_options.Type(str, default="default")),
         ("vega_theme_dark", config_options.Type(str, default="dark")),
         ("vega_renderer", config_options.Type(str, default="svg")),