feat: mermaid theme auto switch

assets/js/load-mermaid.js

@@ -0,0 +1,69 @@
+
+/*!
+  * Simple-Jekyll-Search
+  * Copyright 2015-2020, Christian Fei
+  * Licensed under the MIT License.
+  */
+
+(function(window){
+    'use strict'
+    
+      const elementCode = '.mermaid'
+      const loadMermaid = function(theme) {
+        window.mermaid.initialize({theme})
+        window.mermaid.init({theme}, document.querySelectorAll(elementCode))
+      }
+      const saveOriginalData = function(){
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              element.setAttribute('data-original-code', element.innerHTML)
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+           reject(error) 
+          }
+        })
+      }
+      const resetProcessed = function(){
+        return new Promise((resolve, reject) => {
+          try {
+            var els = document.querySelectorAll(elementCode),
+                count = els.length;
+            els.forEach(element => {
+              if(element.getAttribute('data-original-code') != null){
+                element.removeAttribute('data-processed')
+                element.innerHTML = element.getAttribute('data-original-code')
+              }
+              count--
+              if(count == 0){
+                resolve()
+              }
+            });
+          } catch (error) {
+           reject(error) 
+          }
+        })
+      } 
+    
+      const init = ()=>{
+        saveOriginalData()
+        .catch( console.error )
+        document.body.addEventListener('dark-theme-set', ()=>{
+          resetProcessed()
+          .then(loadMermaid('dark'))
+          .catch(console.error)
+        })
+        document.body.addEventListener('light-theme-set', ()=>{
+          resetProcessed()
+          .then(loadMermaid('default'))
+          .catch(console.error)
+        })
+      }
+      window.initMermaid = init
+    })(window);

layouts/_default/single.html

@@ -46,10 +46,32 @@
         `.Store.Set "hasMermaid"` is executed.
         `.Store.Get "hasMermaid"` will return true and mermaid.js will be loaded.
     */}}
+    
     {{ if .Store.Get "hasMermaid" }}
+        {{ partial "resource.html" (dict "context" . "type" "js" "filename" "js/load-mermaid.js") }}
+        
+        {{ $colorTheme := "light" }}
+        {{ if and (isset site.Params "colortheme") (ne site.Params.colortheme "") }}
+            {{ $colorTheme = site.Params.colortheme | lower }}
+        {{ end }}
+
         <script type="module">
+            function detectCurrentScheme3() {
+                    const defaultTheme = "{{ $colorTheme }}";
+                    if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
+                            return localStorage.getItem("user-color-scheme");
+                    }
+                    if (defaultTheme === "dark" || defaultTheme === "light") {
+                            return defaultTheme;
+                    }
+                    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            }
+            
             import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
-            mermaid.initialize({ startOnLoad: true });
+            window.mermaid = mermaid;
+            window.initMermaid()
+            document.body.dispatchEvent(new CustomEvent(detectCurrentScheme3() + "-theme-set"));
         </script>
     {{ end }}
 {{ end }}
+

layouts/partials/theme-switcher.html

@@ -24,10 +24,19 @@
         let switchButton
         let autoDefinedScheme = window.matchMedia('(prefers-color-scheme: dark)')
         
+        function switchTheme(e) {
+            currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
+            if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
+            document.documentElement.setAttribute('data-theme', currentTheme);
+            changeGiscusTheme(currentTheme);
+            document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
+        }
+        
         const autoChangeScheme = e => {
             currentTheme = e.matches ? 'dark' : 'light'
             document.documentElement.setAttribute('data-theme', currentTheme);
             changeGiscusTheme(currentTheme);
+            document.body.dispatchEvent(new CustomEvent(currentTheme + "-theme-set"));
         }
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -58,13 +67,6 @@
             return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
         }
 
-        function switchTheme(e) {
-            currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
-            if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
-            document.documentElement.setAttribute('data-theme', currentTheme);
-            changeGiscusTheme(currentTheme);
-        }
-
         function showContent() {
             document.body.style.visibility = 'visible';
             document.body.style.opacity = 1;