Redesign v2025.1

resources/js/app.js

@@ -1,7 +1,7 @@
 import { Auth } from './auth.js';
+import { ThemeSelector } from './theme-selector.js';
 
 let auth = new Auth();
-
 document.querySelectorAll('.add-passkey').forEach((el) => {
   el.addEventListener('click', () => {
     auth.register();
@@ -13,3 +13,6 @@ document.querySelectorAll('.login-passkey').forEach((el) => {
     auth.login();
   });
 });
+
+let themeSelector = new ThemeSelector();
+themeSelector.setupEventListeners();

resources/js/theme-selector.js

@@ -0,0 +1,70 @@
+class ThemeSelector {
+  constructor() {
+    this.widget = document.querySelector('#theme-selector');
+  }
+
+  setupEventListeners() {
+    this.widget.querySelectorAll('#theme-selector-dropdown input').forEach((radioInput) => radioInput.addEventListener('input', (e) => {
+      let theme = e.target.value;
+
+      // Update current icon
+      this.widget.querySelectorAll('.toggle svg').forEach((svg) => {
+        if (svg.classList.contains(theme)) {
+          svg.style.display = '';
+        } else {
+          svg.style.display = 'none';
+        }
+      });
+
+      // Set the theme
+      let selectedTheme;
+      switch (theme) {
+        case 'dark':
+        case 'light':
+          selectedTheme = theme;
+          break;
+        default:
+          selectedTheme = 'light dark';
+      }
+
+      const systemTheme = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+      const html = document.querySelector('html');
+      let currentTheme = html.style.getPropertyValue('color-scheme');
+      if (currentTheme === '') {
+        currentTheme = 'light dark';
+      }
+
+      /* do we need to transition */
+      let doTransition = false;
+
+      if (selectedTheme !== currentTheme) {
+        if (selectedTheme === 'light dark') {
+          doTransition = currentTheme !== systemTheme;
+        } else if (currentTheme === 'light dark') {
+          doTransition = selectedTheme !== systemTheme;
+        } else {
+          doTransition = true;
+        }
+      }
+
+      html.style.viewTransitionName = 'changing-theme';
+      if (doTransition && document.startViewTransition) {
+        document.startViewTransition(() => {
+          // Close the popover
+          document.querySelector('#theme-selector-dropdown').togglePopover();
+
+          // Set the colour theme
+          html.style.setProperty('color-scheme', selectedTheme);
+        });
+      } else {
+        // Close the popover
+        document.querySelector('#theme-selector-dropdown').togglePopover();
+
+        // Set the colour theme
+        html.style.setProperty('color-scheme', selectedTheme);
+      }
+    }));
+  }
+}
+
+export { ThemeSelector };