feat: update Mermaid diagrams to follow theme preference (#576)

* [Issue 575]   Update Mermaid Diagrams to follow theme

* [Issue 575]   Add example post

* chore: downgrade Node.js version

* chore: install lighthouse plugin with npm

---------

Co-authored-by: Alexander Bilz <[email protected]>

Author: timvw74

exampleSite/config/_default/hugo.toml

@@ -22,6 +22,10 @@ pygmentsCodefencesGuessSyntax = true
 # Localized dates requires Hugo version 0.87.0
 localizedDates = false
 
+# Mermaid
+[params.mermaid]
+enable = true
+
 [markup]
     [markup.goldmark]
       [markup.goldmark.renderer]

exampleSite/content/english/post/mermaid-test.md

@@ -0,0 +1,53 @@
++++
+author = "Hugo Authors"
+title = "Guide to Mermaid Diagrams in Hugo"
+date = "2025-08-11"
+description = "Guide to Mermaid Diagrams in Hugo"
+tags = [
+    "thumbnail",
+]
+thumbnail= "images/landscape.jpg"
++++
+
+For displaying diagrams and charts in a Hugo project, you can leverage Mermaid.
+
+If you want to use Mermaid diagrams in your site, enable mermaid support in your config file:
+
+
+```toml
+[params.mermaid]
+enable = true
+```
+
+You can then use mermaid syntax to display your diagram:
+
+```markdown
+    ```mermaid
+        sequenceDiagram
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+        Bob-->Alice: Checking with John...
+        Alice->John: Yes... John, how are you?
+    ```
+```
+
+
+Which should render your diagram as:
+
+
+
+```mermaid
+sequenceDiagram
+    Alice ->> Bob: Hello Bob, how are you?
+    Bob-->>John: How about you John?
+    Bob--x Alice: I am good thanks!
+    Bob-x John: I am good thanks!
+    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+
+    Bob-->Alice: Checking with John...
+    Alice->John: Yes... John, how are you?
+```

layouts/partials/mermaid.html

@@ -1,6 +1,7 @@
 {{ if .Page.Store.Get "hasMermaid" }}
   <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
-    mermaid.initialize({ startOnLoad: true });
+    const mermaidtheme = getStoredThemeStyle() === 'dark' ? 'dark' : 'base';
+    mermaid.initialize({ startOnLoad: true, theme: mermaidtheme });
   </script>
 {{ end }}