themeManager.js

Go to the documentation of this file.

 
import { useEffect } from 'react';
 
export function useTheme(settings) {
  useEffect(() => {
    applyThemeFromSettings(settings);
  }, [settings]);
}
 
export function applyThemeFromSettings(settings) {
  if (!settings || !settings.display) return;
  const theme = settings.display.theme || 'default';
  const auto = settings.display.autoTheme || false;
 
  function setTheme(name) {
    if (!name || name === 'default') {
      document.documentElement.removeAttribute('data-theme');
    } else {
      document.documentElement.setAttribute('data-theme', name);
    }
  }
 
  if (auto) {
    const matcher = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
    const apply = () => setTheme(matcher.matches ? 'dark' : 'light');
    apply();
    if (matcher && matcher.addEventListener) matcher.addEventListener('change', apply);
    else if (matcher && matcher.addListener) matcher.addListener(apply);
  } else {
    setTheme(theme);
  }
}
 
export async function initTheme() {
  try {
    // Public pages should use the frontpage theme, not the dashboard theme
    const p = window.location.pathname || '/';
    const isPublic = (
      p === '/' ||
      p.startsWith('/login') ||
      p.startsWith('/forgot-password') ||
      p.startsWith('/reset-password') ||
      p.startsWith('/verify-email') ||
      p.startsWith('/docs') ||
      p === '/about' ||
      p === '/privacy' ||
      p === '/terms' ||
      p === '/security'
    );
    if (isPublic) return;
 
    const raw = localStorage.getItem('app_settings');
    if (raw) {
      const cfg = JSON.parse(raw);
      applyThemeFromSettings(cfg);
      return;
    }
    // try fetch settings if token exists
    const token = localStorage.getItem('token');
    if (token) {
  const res = await fetch('/api/settings', { headers: { Authorization: `Bearer ${token}` } });
      if (res.ok) {
        const cfg = await res.json();
        localStorage.setItem('app_settings', JSON.stringify(cfg));
        applyThemeFromSettings(cfg);
      }
    }
  } catch (err) {
    console.warn('theme init failed', err);
  }
}