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/img-popup.js

@@ -32,17 +32,21 @@ export function imgPopup() {
     document.querySelector('.popup.dark') === null
   );
 
-  if (Theme.visualState === Theme.DARK) {
+  if (Theme.isDark) {
     selector = darkImages;
   }
 
   let current = GLightbox({ selector: `${selector}` });
 
-  if (hasDualImages && Theme.switchable) {
+  if (hasDualImages && Theme.isToggleable) {
     let reverse = null;
 
     window.addEventListener('message', (event) => {
-      if (event.source === window && event.data && event.data.id === Theme.ID) {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.id === Theme.eventId
+      ) {
         [current, reverse] = swapImages(current, reverse);
       }
     });

_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);
   }
 }

_javascript/modules/components/mode-toggle.js

@@ -1,15 +1,46 @@
 /**
- * Add listener for theme mode toggle
+ * Sets up the mode toggle dropdown, allowing users to switch between light, dark, and system themes.
+ *
+ * Dependencies:
+ *  - Theme (${JS_ROOT}/theme.js)
  */
 
-const $toggle = document.getElementById('mode-toggle');
+import 'bootstrap/js/src/dropdown.js';
+
+const ACTIVE_CLASS = 'active';
+const dropdown = document.querySelector('#mode-toggle + .dropdown-menu');
+const activeMode = Theme.isSystemTheme
+  ? Theme.Mode.SYSTEM
+  : Theme.resolvedTheme;
 
 export function modeWatcher() {
-  if (!$toggle) {
+  if (!Theme.isToggleable) {
     return;
   }
 
-  $toggle.addEventListener('click', () => {
-    Theme.flip();
+  dropdown.querySelectorAll('.dropdown-item').forEach((option) => {
+    const mode = option.dataset.themeMode;
+    if (mode === activeMode) {
+      option.classList.add(ACTIVE_CLASS);
+      return;
+    }
+  });
+
+  dropdown.addEventListener('click', (event) => {
+    const current = event.target.closest('.dropdown-item');
+
+    if (!current) {
+      return;
+    }
+
+    const lastActive = dropdown.querySelector(`.${ACTIVE_CLASS}`);
+
+    if (lastActive === current) {
+      return;
+    }
+
+    lastActive.classList.remove(ACTIVE_CLASS);
+    current.classList.add(ACTIVE_CLASS);
+    Theme.update(current.dataset.themeMode);
   });
 }