sofarr/client/src/ui/theme.js

// Copyright (c) 2026 Gordon Bolton. MIT License.

import { getTheme, saveTheme } from '../utils/storage.js';

// Apply saved theme immediately on load
(function applyTheme() {
  const theme = getTheme() || 'light';
  document.documentElement.setAttribute('data-theme', theme);
})();

export function initThemeSwitcher() {
  const themeButtons = document.querySelectorAll('.theme-btn');
  const currentTheme = getTheme() || 'light';
  
  // Set initial active state on buttons
  themeButtons.forEach(btn => {
    if (btn.getAttribute('data-theme') === currentTheme) {
      btn.classList.add('active');
    } else {
      btn.classList.remove('active');
    }
    
    btn.addEventListener('click', () => {
      const theme = btn.getAttribute('data-theme');
      if (theme) {
        setTheme(theme);
      }
    });
  });
}

export function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  saveTheme(theme);
  
  // Sync button active classes if elements are present on the page
  const themeButtons = document.querySelectorAll('.theme-btn');
  themeButtons.forEach(btn => {
    if (btn.getAttribute('data-theme') === theme) {
      btn.classList.add('active');
    } else {
      btn.classList.remove('active');
    }
  });
}