@umbra.ui/core 0.1.0

package/src/theme.ts

@@ -0,0 +1,378 @@
+import { ref, computed, readonly, type Ref, type ComputedRef } from "vue";
+
+export type Theme = "light" | "dark" | "custom";
+
+export interface ThemeConfig {
+  theme: Theme;
+  autoDetect: boolean;
+  customThemeId?: string;
+  customThemeColorMode?: "light" | "dark";
+}
+
+// Track registered themes to avoid duplicates
+const registeredThemes = new Set<string>();
+
+class ThemeManager {
+  private currentTheme: Ref<Theme> = ref("light");
+  private autoDetect: Ref<boolean> = ref(true);
+  private mediaQuery: MediaQueryList | null = null;
+  private systemThemeListener: ((e: MediaQueryListEvent) => void) | null = null;
+  private customThemeId: Ref<string | undefined> = ref(undefined);
+  private customThemeColorMode: Ref<"light" | "dark" | undefined> =
+    ref(undefined);
+
+  constructor() {
+    this.initialize();
+  }
+
+  private initialize(): void {
+    // Load saved configuration
+    const savedConfig = this.loadConfig();
+
+    if (savedConfig) {
+      this.autoDetect.value = savedConfig.autoDetect;
+      this.customThemeId.value = savedConfig.customThemeId;
+      this.customThemeColorMode.value = savedConfig.customThemeColorMode;
+      // If auto-detect is enabled, use system theme regardless of saved theme
+      if (this.autoDetect.value) {
+        this.setupSystemThemeDetection();
+      } else {
+        // Use saved theme only if auto-detect is disabled
+        if (
+          savedConfig.theme === "custom" &&
+          this.customThemeId.value &&
+          this.customThemeColorMode.value
+        ) {
+          // Properly restore custom theme with both ID and color mode
+          this.setCustomTheme(
+            this.customThemeId.value,
+            this.customThemeColorMode.value,
+            false
+          );
+        } else {
+          this.setTheme(savedConfig.theme, false);
+        }
+      }
+    } else {
+      // First time setup - default to auto-detect
+      this.setupSystemThemeDetection();
+    }
+  }
+
+  private loadConfig(): ThemeConfig | null {
+    try {
+      const saved = localStorage.getItem("umbra-theme-config");
+      return saved ? JSON.parse(saved) : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private saveConfig(): void {
+    const config: ThemeConfig = {
+      theme: this.currentTheme.value,
+      autoDetect: this.autoDetect.value,
+      customThemeId: this.customThemeId.value,
+      customThemeColorMode: this.customThemeColorMode.value,
+    };
+
+    try {
+      localStorage.setItem("umbra-theme-config", JSON.stringify(config));
+    } catch (e) {
+      console.warn("Failed to save theme configuration:", e);
+    }
+  }
+
+  private setupSystemThemeDetection(): void {
+    // Clean up existing listener if any
+    this.removeSystemThemeListener();
+
+    this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const systemTheme: Theme = this.mediaQuery.matches ? "dark" : "light";
+    this.setTheme(systemTheme, false);
+
+    // Create and store the listener
+    this.systemThemeListener = (e: MediaQueryListEvent) => {
+      if (this.autoDetect.value) {
+        this.setTheme(e.matches ? "dark" : "light", false);
+      }
+    };
+
+    this.mediaQuery.addEventListener("change", this.systemThemeListener);
+  }
+
+  private removeSystemThemeListener(): void {
+    if (this.mediaQuery && this.systemThemeListener) {
+      this.mediaQuery.removeEventListener("change", this.systemThemeListener);
+      this.systemThemeListener = null;
+    }
+  }
+
+  public setTheme(theme: Theme, save: boolean = true): void {
+    this.currentTheme.value = theme;
+
+    // Remove all theme-related classes and attributes
+    document.documentElement.classList.remove(
+      "light",
+      "light-theme",
+      "dark",
+      "dark-theme"
+    );
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.removeAttribute("data-custom-theme");
+
+    // Apply theme using CSS classes
+    if (theme === "custom" && this.customThemeId.value) {
+      document.documentElement.setAttribute("data-theme", "custom");
+      document.documentElement.setAttribute(
+        "data-custom-theme",
+        this.customThemeId.value
+      );
+
+      // Also set the color mode class for custom themes
+      if (this.customThemeColorMode.value === "dark") {
+        document.documentElement.classList.add("dark", "dark-theme");
+      } else {
+        document.documentElement.classList.add("light", "light-theme");
+      }
+    } else if (theme === "dark") {
+      document.documentElement.classList.add("dark", "dark-theme");
+    } else {
+      document.documentElement.classList.add("light", "light-theme");
+    }
+
+    if (save) {
+      this.saveConfig();
+    }
+
+    // Dispatch theme change event
+    window.dispatchEvent(
+      new CustomEvent("theme-change", {
+        detail: {
+          theme,
+          customThemeId:
+            theme === "custom" ? this.customThemeId.value : undefined,
+          customThemeColorMode:
+            theme === "custom" ? this.customThemeColorMode.value : undefined,
+        },
+      })
+    );
+  }
+
+  public setCustomTheme(
+    customThemeId: string,
+    customThemeColorMode: "light" | "dark",
+    save: boolean = true
+  ): void {
+    this.customThemeId.value = customThemeId;
+    this.customThemeColorMode.value = customThemeColorMode;
+    this.setTheme("custom", save);
+  }
+
+  public getTheme(): Theme {
+    return this.currentTheme.value;
+  }
+
+  public getConfig(): ThemeConfig {
+    return {
+      theme: this.currentTheme.value,
+      autoDetect: this.autoDetect.value,
+      customThemeId: this.customThemeId.value,
+      customThemeColorMode: this.customThemeColorMode.value,
+    };
+  }
+
+  public setAutoDetect(enabled: boolean): void {
+    this.autoDetect.value = enabled;
+
+    if (enabled) {
+      this.setupSystemThemeDetection();
+    } else {
+      this.removeSystemThemeListener();
+    }
+
+    this.saveConfig();
+  }
+
+  public isAutoDetectEnabled(): boolean {
+    return this.autoDetect.value;
+  }
+
+  public toggleTheme(): void {
+    // Disable auto-detect when manually toggling
+    if (this.autoDetect.value) {
+      this.setAutoDetect(false);
+    }
+
+    // Toggle between light and dark only
+    // If custom theme is active, switch to light
+    let newTheme: Theme;
+    switch (this.currentTheme.value) {
+      case "light":
+        newTheme = "dark";
+        break;
+      case "dark":
+        newTheme = "light";
+        break;
+      case "custom":
+        newTheme = "light";
+        break;
+      default:
+        newTheme = "light";
+    }
+
+    this.setTheme(newTheme);
+  }
+
+  public destroy(): void {
+    this.removeSystemThemeListener();
+  }
+
+  // Expose reactive references as readonly for components
+  public get theme(): Readonly<Ref<Theme>> {
+    return readonly(this.currentTheme);
+  }
+
+  public get customThemeIdRef(): Readonly<Ref<string | undefined>> {
+    return readonly(this.customThemeId);
+  }
+
+  public get customThemeColorModeRef(): Readonly<
+    Ref<"light" | "dark" | undefined>
+  > {
+    return readonly(this.customThemeColorMode);
+  }
+
+  public get autoDetectRef(): Readonly<Ref<boolean>> {
+    return readonly(this.autoDetect);
+  }
+
+  // Computed property for the full config
+  public get configRef(): ComputedRef<ThemeConfig> {
+    return computed(() => ({
+      theme: this.currentTheme.value,
+      autoDetect: this.autoDetect.value,
+      customThemeId: this.customThemeId.value,
+      customThemeColorMode: this.customThemeColorMode.value,
+    }));
+  }
+}
+
+// Create singleton instance
+export const themeManager = new ThemeManager();
+
+// Export reactive references for direct use in components
+export const currentTheme = themeManager.theme;
+export const customThemeId = themeManager.customThemeIdRef;
+export const customThemeColorMode = themeManager.customThemeColorModeRef;
+export const autoDetect = themeManager.autoDetectRef;
+export const themeConfig = themeManager.configRef;
+
+// Export convenience functions (keep existing API)
+export const setTheme = (theme: Theme, save?: boolean): void =>
+  themeManager.setTheme(theme, save);
+
+export const setCustomTheme = (
+  customThemeId: string,
+  customThemeColorMode: "light" | "dark",
+  save?: boolean
+): void =>
+  themeManager.setCustomTheme(customThemeId, customThemeColorMode, save);
+
+export const getTheme = (): Theme => themeManager.getTheme();
+
+export const getThemeConfig = (): ThemeConfig => themeManager.getConfig();
+
+export const toggleTheme = (): void => themeManager.toggleTheme();
+
+export const setAutoDetect = (enabled: boolean): void =>
+  themeManager.setAutoDetect(enabled);
+
+export const isAutoDetectEnabled = (): boolean =>
+  themeManager.isAutoDetectEnabled();
+
+// Cleanup function for SPA navigation
+export const destroyThemeManager = (): void => themeManager.destroy();
+
+// Custom theme registration utilities
+export const registerCustomTheme = (
+  themeId: string,
+  cssVariables: Record<string, string>
+): void => {
+  // Check if already registered
+  if (registeredThemes.has(themeId)) {
+    console.warn(`Theme "${themeId}" is already registered`);
+    return;
+  }
+
+  // Check if style element already exists (e.g., from hot reload)
+  const existing = document.querySelector(
+    `style[data-umbra-custom-theme="${themeId}"]`
+  );
+  if (existing) {
+    existing.remove();
+  }
+
+  const style = document.createElement("style");
+  style.setAttribute("data-umbra-custom-theme", themeId);
+
+  const cssVars = Object.entries(cssVariables)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join("\n");
+
+  style.textContent = `
+[data-theme="custom"][data-custom-theme="${themeId}"] {
+${cssVars}
+}`;
+
+  document.head.appendChild(style);
+  registeredThemes.add(themeId);
+};
+
+export const unregisterCustomTheme = (themeId: string): void => {
+  const styleElement = document.querySelector(
+    `style[data-umbra-custom-theme="${themeId}"]`
+  );
+
+  if (styleElement) {
+    styleElement.remove();
+    registeredThemes.delete(themeId);
+  }
+};
+
+export const isThemeRegistered = (themeId: string): boolean => {
+  return registeredThemes.has(themeId);
+};
+
+export const getRegisteredThemes = (): string[] => {
+  return Array.from(registeredThemes);
+};
+
+// Composable for use in Vue components
+export const useTheme = () => {
+  return {
+    // Reactive refs
+    theme: currentTheme,
+    customThemeId,
+    customThemeColorMode,
+    autoDetect,
+    config: themeConfig,
+
+    // Methods
+    setTheme,
+    setCustomTheme,
+    toggleTheme,
+    setAutoDetect,
+
+    // Custom theme registration (for advanced usage)
+    registerCustomTheme,
+    unregisterCustomTheme,
+    isThemeRegistered,
+    getRegisteredThemes,
+
+    // Non-reactive getters (for backward compatibility)
+    getTheme,
+    getThemeConfig,
+    isAutoDetectEnabled,
+  };
+};