feat: Add inital dark/light mode switching

templates/assets/js/theme.js

@@ -9,3 +9,113 @@ if (document.getElementsByClassName('clean-product').length > 0) {
         vanillaZoom.init('#product-preview');
     };
 }
+
+// Global toggle function for the button
+function toggle() {
+  const currentTheme = getStoredTheme() || getPreferredTheme();
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  setStoredTheme(newTheme);
+  setTheme(newTheme);
+  showActiveTheme(newTheme, true);
+}
+
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2025 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  // Make these functions globally accessible
+  window.getStoredTheme = () => localStorage.getItem('theme')
+  window.setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  window.getPreferredTheme = () => {
+    const storedTheme = window.getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  window.setTheme = theme => {
+    // Add smooth transitions
+    if (!document.querySelector('#theme-transitions')) {
+      const style = document.createElement('style');
+      style.id = 'theme-transitions';
+      style.textContent = `
+        * {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
+        }
+        *:before, *:after {
+          transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  window.showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    
+    // Check if btnToActive exists before accessing its properties
+    if (btnToActive) {
+      const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+        element.setAttribute('aria-pressed', 'false')
+      })
+
+      btnToActive.classList.add('active')
+      btnToActive.setAttribute('aria-pressed', 'true')
+      activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+      const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+      themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+      if (focus) {
+        themeSwitcher.focus()
+      }
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()