feat(theme): persist user theme preferences (#2756)

- Migrate theme persistence from `sessionStorage` to `localStorage`
- Rename theme HTML attribute to `data-bs-theme` for Bootstrap compatibility
- Trim and compile CSS according to the chosen theme mode

_javascript/modules/components/mermaid.js

@@ -3,10 +3,14 @@
  */
 
 const MERMAID = 'mermaid';
-const themeMapper = Theme.getThemeMapper('default', 'dark');
+const themeMap = Theme.newThemeMap('default', 'dark');
 
 function refreshTheme(event) {
-  if (event.source === window && event.data && event.data.id === Theme.ID) {
+  if (
+    event.source === window &&
+    event.data &&
+    event.data.id === Theme.eventId
+  ) {
     // Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344>
     const mermaidList = document.getElementsByClassName(MERMAID);
 
@@ -16,7 +20,7 @@ function refreshTheme(event) {
       elem.removeAttribute('data-processed');
     });
 
-    const newTheme = themeMapper[Theme.visualState];
+    const newTheme = themeMap[Theme.resolvedTheme];
 
     mermaid.initialize({ theme: newTheme });
     mermaid.init(null, `.${MERMAID}`);
@@ -43,7 +47,7 @@ export function loadMermaid() {
     return;
   }
 
-  const initTheme = themeMapper[Theme.visualState];
+  const initTheme = themeMap[Theme.resolvedTheme];
 
   let mermaidConf = {
     theme: initTheme
@@ -54,7 +58,7 @@ export function loadMermaid() {
 
   mermaid.initialize(mermaidConf);
 
-  if (Theme.switchable) {
+  if (Theme.isToggleable) {
     window.addEventListener('message', refreshTheme);
   }
 }