Improve code styling and documentation about option auto_themed

README.md

@@ -49,6 +49,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
            draggable: true
            skip_classes:
              - custom-skip-class-name
+           auto_themed: false
            auto_caption: false
            caption_position: bottom
            background: white
@@ -67,6 +68,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
     | zoomable | true | Enable or disable zoomable images. |
     | draggable | true | Enable or disable mouse drag to go prev and next slide. |
     | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. |
+    | auto_themed | false | Enable or disable supporting light and dark mode of mkdocs material. |
     | auto_caption | false | Enable or disable using alt of image as caption title automatically. |
     | caption_position | bottom | Default captions position. (bottom, top, left, right) |
     | background | white | The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example `#74b9ff` or `Gainsboro` or `none` for nothing. |

demo-mkdocs/docs/gallery/gallery.md

@@ -67,3 +67,11 @@ There are two galleries: taipei and seattle.
 
 <figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
 </figure>
+
+## Dark and light mode
+
+If you are using the mkdocs theme is material, then we provide an option `auto_themed` to support the dark and light mode of the material theme. When enabled, the image with the same theme will be grouped as a galley in the light box. This is done by automatically adding attribute `data-gallery` to images with the same theme.
+
+Enabled in a similar way to option [`auto_caption`](../caption/caption.md#image-alt-as-the-caption).
+
+Check more details about the dark and light mode on the [official document](https://squidfunk.github.io/mkdocs-material/reference/images/#light-and-dark-mode).

demo-mkdocs/docs/index.md

@@ -47,6 +47,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
            draggable: true
            skip_classes:
              - custom-skip-class-name
+           auto_themed: false
            auto_caption: false
            caption_position: bottom
            background: white
@@ -65,6 +66,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
     | zoomable | true | Enable or disable zoomable images. |
     | draggable | true | Enable or disable mouse drag to go prev and next slide. |
     | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. |
+    | auto_themed | false | Enable or disable supporting light and dark mode of mkdocs material. |
     | auto_caption | false | Enable or disable using alt of image as caption title automatically. |
     | caption_position | bottom | Default captions position. (bottom, top, left, right) |
     | background | white | The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example `#74b9ff` or `Gainsboro` or `none` for nothing. |

mkdocs_glightbox/plugin.py

@@ -127,24 +127,8 @@ def on_page_markdown(self, markdown, page, config, files, **kwargs):
         if not self.config["auto_themed"] or not page.meta.get("glightbox.auto_themed", True):
             return markdown
 
-        def repl_md(match):
-            md = match.group()
-            if "#only-light" in md or "#gh-light-mode-only" in md:
-                return md + "{data-gallery='light'}"
-            elif "#only-dark" in md or "#gh-dark-mode-only" in md:
-                return md + "{data-gallery='dark'}"
-            return md
-
-        def repl_html(match):
-            html = match.group()
-            if "#only-light" in html or "#gh-light-mode-only" in html:
-                return f'{html[:4]} data-gallery="light" {html[4:]}'
-            elif "#only-dark" in html or "#gh-dark-mode-only" in html:
-                return f'{html[:4]} data-gallery="dark" {html[4:]}'
-            return html
-
-        markdown = re.sub("!\\[[^\\]]*\\]\\([^)]*\\)", repl_md, markdown)
-        markdown = re.sub("<img\\s+[^>]*>", repl_html, markdown)
+        markdown = re.sub("!\\[[^\\]]*\\]\\([^)]*\\)", self.repl_md, markdown)
+        markdown = re.sub("<img\\s+[^>]*>", self.repl_html, markdown)
 
         return markdown
 
@@ -172,6 +156,26 @@ def on_page_content(self, html, page, config, **kwargs):
 
         return html
 
+    @staticmethod
+    def repl_md(match):
+        """Add attribute data-gallery to the img tag (type: md)"""
+        md = match.group()
+        if "#only-light" in md or "#gh-light-mode-only" in md:
+            return md + "{data-gallery='light'}"
+        elif "#only-dark" in md or "#gh-dark-mode-only" in md:
+            return md + "{data-gallery='dark'}"
+        return md
+
+    @staticmethod
+    def repl_html(match):
+        """Add attribute data-gallery to the img tag (type: html)"""
+        html = match.group()
+        if "#only-light" in html or "#gh-light-mode-only" in html:
+            return f'{html[:4]} data-gallery="light" {html[4:]}'
+        elif "#only-dark" in html or "#gh-dark-mode-only" in html:
+            return f'{html[:4]} data-gallery="dark" {html[4:]}'
+        return html
+
     def wrap_img_with_anchor(self, match, plugin_config, skip_class, meta):
         """Wrap image tags with anchor tags"""
         try: