dss/admin-ui/js/core/theme.js

/**
 * Theme Manager - Handles light/dark theme with cookie persistence
 */

class ThemeManager {
  constructor() {
    this.cookieName = 'dss-theme';
    this.cookieExpireDays = 365;
    this.init();
  }

  init() {
    // Load theme from cookie or default to dark
    const savedTheme = this.getCookie(this.cookieName) || 'dark';
    this.setTheme(savedTheme, false); // Don't save on init
  }

  /**
   * Get cookie value
   */
  getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
      return parts.pop().split(';').shift();
    }
    return null;
  }

  /**
   * Set cookie value
   */
  setCookie(name, value, days) {
    const date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = `expires=${date.toUTCString()}`;
    document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`;
  }

  /**
   * Set theme (light or dark)
   */
  setTheme(theme, save = true) {
    const html = document.documentElement;

    if (theme === 'dark') {
      html.classList.add('dark');
      html.classList.remove('light');
    } else {
      html.classList.add('light');
      html.classList.remove('dark');
    }

    // Save to cookie
    if (save) {
      this.setCookie(this.cookieName, theme, this.cookieExpireDays);
    }

    // Dispatch event for other components
    window.dispatchEvent(new CustomEvent('theme-changed', {
      detail: { theme }
    }));

    return theme;
  }

  /**
   * Toggle between light and dark
   */
  toggle() {
    const currentTheme = this.getCurrentTheme();
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    return this.setTheme(newTheme);
  }

  /**
   * Get current theme
   */
  getCurrentTheme() {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  }

  /**
   * Check if dark mode is active
   */
  isDark() {
    return this.getCurrentTheme() === 'dark';
  }
}

// Create singleton instance
const themeManager = new ThemeManager();

export default themeManager;