feat: dark mode 🕶️ (#32)

* feat: dark mode
* feat: add flag for darkmode

---------

Signed-off-by: Jan Larwig <[email protected]>
Co-authored-by: Yves Chevallier <[email protected]>

Author: tuunit

README.md

@@ -75,6 +75,7 @@ plugins:
       tooltips: true # control if tooltips will be shown (default: true)
       edit: true     # control if edit button will be shown in the lightbox view (default: true)
       border: 10     # increase or decrease the border / margin around your diagrams (default: 0)
+      darkmode: true # support darkmode. allows for automatic switching between dark and lightmode based on the theme toggle. (default: false)
 ```
 
 ## Material Integration

examples/docs/configuration.md

@@ -28,6 +28,11 @@ plugins:
       # Control if edit button will be shown in the lightbox view
       # (data-edit)
       edit: true
+
+      # Control if darkmode is supported
+      # When activated the color scheme for your diagrams is automatically toggled
+      # based on the selected theme. Supports classic mkdocs and mkdocs-material.
+      darkmode: true 
 ```
 ## HTML Attributes
 For each global configuration option you can also use the attribute in the diagram itself. This will override the global configuration. Here is an example:

examples/docs/index.md

@@ -35,6 +35,7 @@ The currently supported features are:
 * Support for multi page diagrams by selecting which page to display.
 * Compatible with `mkdocs-caption` and `mkdocs-glightbox`.
 * Print and edit button.
+* Dark Mode 🕶️
 
 ## Usage
 

examples/mkdocs-classic.yml

@@ -0,0 +1,38 @@
+site_name: test_mkdocs_drawio
+docs_dir: docs
+nav:
+  - Documentation:
+      - Getting Started: index.md
+      - Configuration: configuration.md
+      - Plumbing: plumbing.md
+  - Tests:
+    - Simple Diagram: 'tests/simple-diagram/index.md'
+    - Error Handling: 'tests/error-handling/index.md'
+    - Configuration: 'tests/configuration/index.md'
+    - Code Blocks: 'tests/code-blocks/index.md'
+    - Relative Paths (a): 'tests/relative-paths/index.md'
+    - Relative Paths (b): 'tests/relative-paths/example.md'
+    - Pagging: 'tests/pagging/index.md'
+    - External URL: 'tests/external-url/index.md'
+    - SVG Diagram: 'tests/svg/index.md'
+
+theme:
+    name: mkdocs
+    user_color_mode_toggle: true
+
+plugins:
+    - search
+    - drawio:
+        toolbar: true
+        tooltips: true
+        edit: true
+        border: 20
+        darkmode: true
+    - print-site
+
+
+markdown_extensions:
+  - attr_list
+  - pymdownx.superfences
+
+repo_url: https://github.com/tuunit/mkdocs-drawio

examples/mkdocs.yml

@@ -48,6 +48,7 @@ plugins:
       tooltips: true
       edit: true
       border: 20
+      darkmode: true
   - print-site
 
 repo_url: https://github.com/tuunit/mkdocs-drawio

mkdocs_drawio/css/drawio-darkmode.css

@@ -0,0 +1,15 @@
+/* Drawio Viewer uses color-scheme attribute to switch between light and dark mode
+   Let it synchronize with the Material for MkDocs theme color scheme */
+:root {
+  color-scheme: light;
+}
+
+/* Material for MkDocs Theme */
+[data-md-color-scheme="slate"] {
+  color-scheme: dark;
+}
+
+/* Mkdocs Theme */
+[data-bs-theme="dark"] {
+  color-scheme: dark;
+}

mkdocs_drawio/js/drawio-darkmode.js

@@ -0,0 +1,16 @@
+const colorSchemeToggle = async function () {
+    document.querySelectorAll("div.mxgraph").forEach(function (div) {
+        let style = div.getAttribute("style").replace(/color-scheme: light;/gi, "");
+        div.setAttribute("style", style);
+    });
+};
+
+if (typeof document$ !== "undefined" && typeof document$.subscribe === "function") {
+    document$.subscribe(({ body }) => {
+        colorSchemeToggle();
+      });
+} else {
+      document.addEventListener("DOMContentLoaded", function () {
+        colorSchemeToggle();
+    });
+}

mkdocs_drawio/plugin.py

@@ -7,6 +7,7 @@
 from html import escape
 from pathlib import Path
 from bs4 import BeautifulSoup
+from mkdocs.utils import copy_file
 from mkdocs.plugins import BasePlugin
 from mkdocs.config import base, config_options as c
 
@@ -27,6 +28,7 @@ class DrawioConfig(base.Config):
     tooltips = c.Type(bool, default=True)
     border = c.Type(int, default=0)
     edit = c.Type(bool, default=True)
+    darkmode = c.Type(bool, default=False)
 
 
 class DrawioPlugin(BasePlugin[DrawioConfig]):
@@ -136,3 +138,24 @@ def parse_diagram(data, alt, src="", path=None) -> str:
                 f"Error: Could not properly parse page name '{alt}' for diagram '{src}' on path '{path}'"
             )
         return ""
+
+    def on_config(self, config: base.Config):
+        """Load embedded files"""
+        self.base = Path(__file__).parent
+        self.css = []
+        self.js = []
+
+        if self.config.darkmode:
+            self.css.append("css/drawio-darkmode.css")
+            self.js.append("js/drawio-darkmode.js")
+
+        for path in self.css:
+            config.extra_css.append(str(Path("/") / path))
+        for path in self.js:
+            config.extra_javascript.append(str(Path("/") / path))
+
+    def on_post_build(self, config: base.Config):
+        """Copy embedded files to the site directory"""
+        site = Path(config["site_dir"])
+        for path in self.css + self.js:
+            copy_file(self.base / path, site / path)

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "mkdocs-drawio"
-version = "1.10.0"
+version = "1.11.0"
 description = "MkDocs plugin for embedding Drawio files"
 authors = [
     "Jan Larwig <[email protected]>",