Add explicit integration with mkdocs-material

Author: sisp

docs/options.md

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

mkdocs_charts_plugin/js/mkdocs-charts-plugin.js

@@ -122,6 +122,20 @@ function updateURL(url) {
     return url;
 }
 
+const bodyelement = document.querySelector('body');
+
+function getTheme() {
+    // Get theme according to mkdocs-material's color scheme
+    const materialColorScheme = bodyelement.getAttribute('data-md-color-scheme');
+    if (materialColorScheme) {
+        return mkdocs_chart_plugin['integrations']['mkdocs_material']['themes_dark'].includes(materialColorScheme)
+            ? mkdocs_chart_plugin['vega_theme_dark']
+            : mkdocs_chart_plugin['vega_theme'];
+    }
+    // Fall back to light theme
+    return mkdocs_chart_plugin['vega_theme'];
+}
+
 var vegalite_charts = [];
 
 function embedChart(block, schema) {
@@ -178,14 +192,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']
     });
 }
@@ -216,26 +226,25 @@ 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'];
+            const theme = getTheme();
             for (let i = 0; i < vegalite_charts.length; i++) {
                 vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
-                    actions: false, 
-                    "theme": theme, 
+                    actions: false,
+                    theme,
                     "renderer": mkdocs_chart_plugin['vega_renderer']
                 });
             }
+
         }
 
       }
@@ -245,7 +254,6 @@ observer.observe(bodyelement, {
 attributes: true //configure it to listen to attribute changes
 });
 
-
 // Load when DOM ready
 if (typeof document$ !== "undefined") {
     // compatibility with mkdocs-material's instant loading feature 

mkdocs_charts_plugin/plugin.py

@@ -1,6 +1,6 @@
 import os
 
-from mkdocs.config import config_options
+from mkdocs.config import base, config_options
 from mkdocs.exceptions import PluginError
 from mkdocs.plugins import BasePlugin
 from mkdocs.utils import copy_file
@@ -22,6 +22,15 @@ def check_library(libnames, dependency):
     )
 
 
+class MkdocsMaterialOptions(base.Config):
+    themes_light = config_options.ListOfItems(config_options.Type(str), default=["default"])
+    themes_dark = config_options.ListOfItems(config_options.Type(str), default=["slate"])
+
+
+class IntegrationsOptions(base.Config):
+    mkdocs_material = config_options.SubConfig(MkdocsMaterialOptions)
+
+
 class ChartsPlugin(BasePlugin):
     config_scheme = (
         ("data_path", config_options.Type(str, default="")),
@@ -31,6 +40,7 @@ class ChartsPlugin(BasePlugin):
         ("vega_renderer", config_options.Type(str, default="svg")),
         ("vega_width", config_options.Type(str, default="container")),
         ("fallback_width", config_options.Type(str, default="800")),
+        ("integrations", config_options.SubConfig(IntegrationsOptions)),
     )
 
     def on_config(self, config, **kwargs):