Support custom dark mode scheme name for Material for MkDocs (#10)

Author: blueswen

CHANGELOG

@@ -1,3 +1,7 @@
+mkdocs-swagger-ui-tag 0.6.1 (2023-03-19)
+
+    * Supported custom dark mode scheme name for Material for MkDocs (#10)
+
 mkdocs-swagger-ui-tag 0.6.0 (2023-03-10)
 
     * Updated swagger-ui-dist to 5.0.0-alpha.0, which starting support OpenAPI 3.1

README.md

@@ -73,6 +73,7 @@ A MkDocs plugin supports for add [Swagger UI](https://github.com/swagger-api/swa
     | supportedSubmitMethods | Array | Default: All Http Methods. Array=["get", "put", "post", "delete", "options", "head", "patch", "trace"]. List of HTTP methods that have the "Try it out" feature enabled. An empty array disables "Try it out" for all operations. This does not filter the operations from the display. |
     | validatorUrl | String | Default: "none". By default, the validation is disabled. When setting with "https://validator.swagger.io/validator", Swagger UI  attempts to validate specs against swagger.io's online validator in multiple OAS Swagger UI. You can use this parameter to set a different validator URL, for example for locally deployed validators ([Validator Badge](https://github.com/swagger-api/validator-badge)). |
     | extra_css | Array | Default: []. Extra CSS files in your `docs_dir` included in Swagger UI iframe target html file. |
+    | dark_scheme_name | String | Default: "slate". Custom dark mode scheme name for [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). Check more details on [Material for MkDocs Documents](https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/). |
 
 ## How it works
 

mkdocs_swagger_ui_tag/plugin.py

@@ -55,6 +55,7 @@ class SwaggerUIPlugin(BasePlugin):
         ),
         ("validatorUrl", config_options.Type(str, default="none")),
         ("extra_css", config_options.Type(list, default=[])),
+        ("dark_scheme_name", config_options.Type(str, default="slate")),
     )
 
     def on_pre_page(self, page, config, files, **kwargs):
@@ -126,10 +127,12 @@ def on_post_page(self, output, page, config, **kwargs):
                 loader=FileSystemLoader(os.path.join(base_path, "swagger-ui"))
             )
             template = env.get_template("swagger.html")
-            extra_css_files = list(map(
-                lambda f: utils.get_relative_url(utils.normalize_url(f), page.url),
-                self.config["extra_css"],
-            ))
+            extra_css_files = list(
+                map(
+                    lambda f: utils.get_relative_url(utils.normalize_url(f), page.url),
+                    self.config["extra_css"],
+                )
+            )
 
             page_dir = os.path.dirname(
                 os.path.join(config["site_dir"], urlunquote(page.url))
@@ -257,6 +260,9 @@ def on_post_page(self, output, page, config, **kwargs):
         """
         if config["theme"].name == "material":
             # synchronized dark mode with mkdocs-material
+            js_code.string += f"""
+            const dark_scheme_name = "{self.config['dark_scheme_name']}"
+            """
             js_code.string += """
             window.scheme = document.body.getAttribute("data-md-color-scheme")
             const options = {
@@ -270,7 +276,7 @@ def on_post_page(self, output, page, config, **kwargs):
                         for(var i = 0; i < iframe_list.length; i++) {
                             var ele = iframe_list.item(i);
                             if (ele) {
-                                if (scheme === "slate") {
+                                if (scheme === dark_scheme_name) {
                                     ele.contentWindow.enable_dark_mode();
                                 } else {
                                     ele.contentWindow.disable_dark_mode();

setup.py

@@ -4,7 +4,7 @@
     long_description = f.read()
 
 setup(name="mkdocs-swagger-ui-tag",
-      version="0.6.0",
+      version="0.6.1",
       author="Blueswen",
       author_email="blueswen.tw@gmail.com",
       url="https://blueswen.github.io/mkdocs-swagger-ui-tag",

tests/fixtures/mkdocs-material-options.yml

@@ -0,0 +1,13 @@
+site_name: test mkdocs_swagger_ui_tag
+use_directory_urls: true
+
+theme:
+  name: material
+
+markdown_extensions:
+  - attr_list
+  - md_in_html
+
+plugins:
+    - swagger-ui-tag:
+        dark_scheme_name: white

tests/fixtures/mkdocs-options.yml

@@ -15,4 +15,3 @@ plugins:
         extra_css:
             - stylesheets/extra-1.css
             - stylesheets/sub_dir/extra-2.css
-

tests/test_builds.py

@@ -328,6 +328,7 @@ def test_material(tmp_path):
     file = testproject_path / "site/index.html"
     contents = file.read_text(encoding="utf8")
     validate_additional_script_code_for_material(contents, exists=True)
+    assert 'const dark_scheme_name = "slate"' in contents
 
     iframe_content_list = validate_iframe(contents, file.parent)
     assert len(iframe_content_list) == 1
@@ -343,6 +344,18 @@ def test_material(tmp_path):
     assert (file.parent / openapi_spec_url).resolve().exists()
 
 
+def test_material_dark_scheme_name(tmp_path):
+    """
+    Integrate with Material for MkDocs
+    """
+    mkdocs_file = "mkdocs-material-options.yml"
+    testproject_path = validate_mkdocs_file(tmp_path, f"tests/fixtures/{mkdocs_file}")
+    file = testproject_path / "site/index.html"
+    contents = file.read_text(encoding="utf8")
+    validate_additional_script_code_for_material(contents, exists=True)
+    assert 'const dark_scheme_name = "white"' in contents
+
+
 def test_url(tmp_path):
     """
     Validate online OpenAPI Spec