feat(#132): pseudo-dynamically update mermaid theme

jannis-baum · Aug 26, 2024 · d3a77ec · d3a77ec
1 parent 1d24c15
commit d3a77ec
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts
@@ -92,6 +92,15 @@ router.get(/.*/, async (req: Request, res: Response) => {
                 import mermaid from '/static/mermaid/mermaid.esm.min.mjs';
                 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
                 mermaid.initialize({ startOnLoad: true, theme: darkModePreference.matches ? 'dark' : 'default' })
+
+                function updateTheme() {
+                    if (document.getElementsByClassName('mermaid').length > 0) {
+                        window.location.reload()
+                    }
+                }
+                darkModePreference.addEventListener("change", () => updateTheme());
+                // deprecated method for backward compatibility
+                darkModePreference.addEventListener(() => updateTheme());
             </script>
             <script type="text/javascript" src="/static/client.js"></script>
         </html>