Optimize academy

resources/js/nova.js

@@ -14,6 +14,69 @@ if (!window.Alpine) {
 import './lib/nav-context.js';
 import { sendTagInteractionEvent } from './lib/tagAnalytics';
 
+function initSkinbaseThemeToggle() {
+  var config = window.SKINBASE_THEME || {};
+  var storageKey = config.storageKey || 'skinbase.theme';
+  var allowedThemes = Array.isArray(config.themes) ? config.themes : ['default', 'light'];
+  var root = document.documentElement;
+  var toggles = Array.prototype.slice.call(document.querySelectorAll('[data-theme-toggle]'));
+
+  function normalizeTheme(theme) {
+    return allowedThemes.indexOf(theme) >= 0 ? theme : 'default';
+  }
+
+  function readTheme() {
+    try {
+      return normalizeTheme(window.localStorage.getItem(storageKey));
+    } catch (_error) {
+      return normalizeTheme(root.dataset.skinbaseTheme);
+    }
+  }
+
+  function writeTheme(theme) {
+    try {
+      window.localStorage.setItem(storageKey, theme);
+    } catch (_error) {
+      // Keep the in-page theme even when storage is unavailable.
+    }
+  }
+
+  function applyTheme(theme) {
+    var normalized = normalizeTheme(theme);
+    var isLight = normalized === 'light';
+
+    root.dataset.skinbaseTheme = normalized;
+
+    toggles.forEach(function (toggle) {
+      var label = toggle.querySelector('[data-theme-toggle-label]');
+      toggle.setAttribute('aria-pressed', isLight ? 'true' : 'false');
+      toggle.setAttribute('aria-label', isLight ? 'Switch to default theme' : 'Switch to light theme');
+      toggle.setAttribute('title', isLight ? 'Switch to default theme' : 'Switch to light theme');
+      if (label) {
+        label.textContent = isLight ? 'Light' : 'Dark';
+      }
+    });
+  }
+
+  applyTheme(readTheme());
+
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', function () {
+      var nextTheme = root.dataset.skinbaseTheme === 'light' ? 'default' : 'light';
+      applyTheme(nextTheme);
+      writeTheme(nextTheme);
+    });
+  });
+
+  window.addEventListener('storage', function (event) {
+    if (event.key === storageKey) {
+      applyTheme(event.newValue);
+    }
+  });
+}
+
+initSkinbaseThemeToggle();
+
 function safeParseJson(value, fallback) {
   try {
     return JSON.parse(value || 'null') ?? fallback;