Merge pull request #23 from sisp/feat/custom-schemes

Add support for custom light/dark schemes

Author: timvink

docs/options.md

@@ -13,12 +13,20 @@ 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%.
 - `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.
+- `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,26 @@ 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'];
+    }
+    // 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'];
+}
+
 var vegalite_charts = [];
 
 function embedChart(block, schema) {
@@ -178,14 +198,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 +232,27 @@ 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
 
-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'];
-            for (let i = 0; i < vegalite_charts.length; i++) {
-                vegaEmbed(vegalite_charts[i].block, vegalite_charts[i].schema, {
-                    actions: false, 
-                    "theme": theme, 
-                    "renderer": mkdocs_chart_plugin['vega_renderer']
-                });
-            }
+            updateCharts();
         }
 
       }
@@ -245,6 +262,12 @@ 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") {

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):