Add new option vega_theme_light

Author: timvink

docs/options.md

@@ -8,7 +8,7 @@ You can customize the plugin by setting options in `mkdocs.yml`. For example:
   plugins:
     - charts:
         vega_width: container
-        vega_theme: default
+        vega_theme_light: default
         vega_theme_dark: dark
         vega_renderer: svg
         use_data_path: True
@@ -22,9 +22,9 @@ 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 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/).
+- `vega_theme_light` (default is `default`). Specify one of the available [vegalite themes](https://vega.github.io/vega-themes/) to use when in light mode. When using the [mkdocs-material](https://squidfunk.github.io/mkdocs-material) theme with a light mode or the user's preferred color scheme in the browser or OS is "light", automatically render charts using this theme. [Color pallete toggle](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle) is also supported.
+- `vega_theme_dark` (default is `dark`). Specify one of the available [vegalite themes](https://vega.github.io/vega-themes/) to use when in dark mode. 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. [Color pallete toggle](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#color-palette-toggle) is also supported.
+- `vega_renderer` (default is `svg`). Specify one of `canvas` or `svg`. See the [demo 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).

mkdocs.yml

@@ -33,9 +33,7 @@ nav:
 
 plugins:
   - search
-  - charts:
-      vega_theme: default
-      vega_renderer: "canvas"
+  - charts
   - git-revision-date-localized:
       type: timeago
       timezone: Europe/Amsterdam

mkdocs_charts_plugin/plugin.py

@@ -35,7 +35,8 @@ class ChartsPlugin(BasePlugin):
     config_scheme = (
         ("data_path", config_options.Type(str, default="")),
         ("use_data_path", config_options.Type(bool, default=True)),
-        ("vega_theme", config_options.Type(str, default="default")),
+        ("vega_theme", config_options.Type(str, default="deprecated")),
+        ("vega_theme_light", config_options.Type(str, default="default")),
         ("vega_theme_dark", config_options.Type(str, default="dark")),
         ("vega_renderer", config_options.Type(str, default="svg")),
         ("vega_width", config_options.Type(str, default="container")),
@@ -48,6 +49,11 @@ def on_config(self, config, **kwargs):
         Event trigger on config.
         See https://www.mkdocs.org/user-guide/plugins/#on_config.
         """
+        if self.config.get("vega_theme") != "deprecated":
+            raise PluginError(
+                "[mkdocs_charts_plugin]: 'vega_theme' is deprecated and has been renamed to 'vega_theme_light'. Together with 'vega_theme_dark' this enables automatic theme switching. Please update your mkdocs.yml."
+            )
+    
         # Add pointer to mkdocs-charts-plugin.js
         # which is added to the output directory during on_post_build() event
         config["extra_javascript"] = ["js/mkdocs-charts-plugin.js"] + config["extra_javascript"]

tests/fixtures/projects/basic/mkdocs.yml

@@ -6,7 +6,6 @@ theme:
 plugins:
   # - search
   - charts:
-      vega_theme: dark
       vega_renderer: "canvas"
 
 use_directory_urls: true

tests/fixtures/projects/basic/mkdocs_colorswitch.yml

@@ -0,0 +1,36 @@
+site_name: My Docs
+
+theme:
+  name: material
+  palette: 
+    # Palette toggle for light mode
+    - scheme: default
+      toggle:
+        icon: material/brightness-7 
+        name: Switch to dark mode
+
+    # Palette toggle for dark mode
+    - scheme: slate
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+
+plugins:
+  # - search
+  - charts
+
+use_directory_urls: true
+
+markdown_extensions:
+  - pymdownx.superfences:
+      custom_fences:
+        - name: vegalite
+          class: vegalite
+          format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite
+  - pymdownx.tabbed:
+      alternate_style: true 
+
+extra_javascript:
+  - https://cdn.jsdelivr.net/npm/vega@5
+  - https://cdn.jsdelivr.net/npm/vega-lite@5
+  - https://cdn.jsdelivr.net/npm/vega-embed@6

tests/fixtures/projects/basic/mkdocs_instant.yml

@@ -8,7 +8,8 @@ theme:
 plugins:
   # - search
   - charts:
-      vega_theme: dark
+      vega_theme_light: default
+      vega_theme_dark: dark
       vega_renderer: "canvas"
 
 use_directory_urls: true
@@ -18,7 +19,7 @@ markdown_extensions:
       custom_fences:
         - name: vegalite
           class: vegalite
-          format: !!python/name:mkdocs_charts_plugin.fences.fence__vegalite
+          format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite
   - pymdownx.tabbed:
       alternate_style: true 
 

tests/fixtures/projects/invalid_json/mkdocs.yml

@@ -7,7 +7,6 @@ site_name: My Docs
 
 plugins:
   - charts:
-      vega_theme: dark
       vega_renderer: "canvas"
 
 use_directory_urls: true