@kupola/kupola 1.7.0 → 1.7.2

package/js/kupola-config.js

@@ -94,8 +94,53 @@ const config = {
   },
 };
 
+const configChangeListeners = [];
+
+function loadConfigFromGlobal() {
+  if (typeof window !== 'undefined' && window.kupolaConfig) {
+    try {
+      mergeDeep(config, window.kupolaConfig);
+      notifyConfigChange();
+    } catch (e) {
+      console.warn('[Kupola] Failed to parse window.kupolaConfig:', e);
+    }
+  }
+}
+
+function notifyConfigChange() {
+  configChangeListeners.forEach(listener => {
+    try {
+      listener(config);
+    } catch (e) {
+      console.warn('[Kupola] Error in config change listener:', e);
+    }
+  });
+}
+
+export function onConfigChange(listener) {
+  if (typeof listener === 'function') {
+    configChangeListeners.push(listener);
+  }
+}
+
+export function offConfigChange(listener) {
+  const index = configChangeListeners.indexOf(listener);
+  if (index > -1) {
+    configChangeListeners.splice(index, 1);
+  }
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', loadConfigFromGlobal);
+  } else {
+    loadConfigFromGlobal();
+  }
+}
+
 export function setConfig(options) {
   mergeDeep(config, options);
+  notifyConfigChange();
 }
 
 export function getConfig(key) {

package/js/theme.js

@@ -1,7 +1,17 @@
-import { getIconsPath, getDefaultTheme, getDefaultBrand, setConfig } from './kupola-config.js';
+import { getIconsPath, getDefaultTheme, getDefaultBrand, setConfig, onConfigChange } from './kupola-config.js';
 
 const THEME_KEY = 'kupola-theme';
 const BRAND_KEY = 'kupola-brand';
+let _themeInitialized = false;
+
+onConfigChange((newConfig) => {
+  const toggleBtn = document.querySelector('[data-theme-toggle]');
+  if (toggleBtn) {
+    const currentTheme = getTheme();
+    updateThemeIcon(toggleBtn);
+    setTheme(currentTheme);
+  }
+});
 
 const BRAND_OPTIONS = [
   { id: 'green', name: '翠绿', color: '#32F08C' },
@@ -88,21 +98,26 @@ function updateThemeIcon(toggleBtn) {
 function initTheme() {
   
   const toggleBtn = document.querySelector('[data-theme-toggle]');
-  if (toggleBtn) {
-    const iconEl = toggleBtn.querySelector('.theme-icon');
-    if (iconEl && iconEl.src) {
-      const currentIconsPath = getIconsPath();
-      if (currentIconsPath === '/icons/') {
-        const iconPath = iconEl.src.substring(0, iconEl.src.lastIndexOf('/') + 1);
-        const basePath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
-        const relativeIconsPath = iconPath.replace(window.location.origin + basePath, '');
-        if (relativeIconsPath !== iconPath) {
-          setConfig({
-            paths: {
-              icons: relativeIconsPath,
-              base: basePath
-            }
-          });
+  
+  if (!_themeInitialized) {
+    _themeInitialized = true;
+    
+    if (toggleBtn) {
+      const iconEl = toggleBtn.querySelector('.theme-icon');
+      if (iconEl && iconEl.src) {
+        const currentIconsPath = getIconsPath();
+        if (currentIconsPath === '/icons/') {
+          const iconPath = iconEl.src.substring(0, iconEl.src.lastIndexOf('/') + 1);
+          const basePath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
+          const relativeIconsPath = iconPath.replace(window.location.origin + basePath, '');
+          if (relativeIconsPath !== iconPath) {
+            setConfig({
+              paths: {
+                icons: relativeIconsPath,
+                base: basePath
+              }
+            });
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.7.0",
+  "version": "1.7.2",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",