ThemeSelector.jsx

Go to the documentation of this file.

import { useEffect, useState } from 'react';
import './ThemeSelector.css';
import { apiFetch } from '../lib/api';
const themes = [
  { id: 'system', name: 'System', icon: 'desktop_windows' },
  { id: 'light', name: 'Light', icon: 'light_mode' },
  { id: 'dark', name: 'Dark', icon: 'dark_mode' },
  { id: 'blue', name: 'Blue', icon: 'palette' },
  { id: 'green', name: 'Green', icon: 'forest' },
  { id: 'contrast', name: 'High Contrast', icon: 'contrast' },
  { id: 'colorblind', name: 'Colorblind', icon: 'accessibility' }
];
 
export default function ThemeSelector() {
  const [currentTheme, setCurrentTheme] = useState('system');
  const [isOpen, setIsOpen] = useState(false);
 
  useEffect(() => {
    // Always fetch theme from server if authenticated
    const token = localStorage.getItem('token');
    if (token) {
      apiFetch('/users/me/theme', {
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' }
      })
        .then(r => {
          if (!r.ok) throw new Error('no theme');
          return r.json();
        })
        .then(json => {
          const serverTheme = json.theme || 'system';
          setCurrentTheme(serverTheme);
          applyTheme(serverTheme);
        })
        .catch(() => {
          setCurrentTheme('system');
          applyTheme('system');
        });
    } else {
      setCurrentTheme('system');
      applyTheme('system');
    }
    // Listen for JWT changes (e.g., after impersonation)
    const handleJwtChange = () => {
      const newToken = localStorage.getItem('token');
      if (newToken) {
        apiFetch('/users/me/theme', {
          headers: { Authorization: `Bearer ${newToken}`, 'Content-Type': 'application/json' }
        })
          .then(r => r.ok ? r.json() : { theme: 'system' })
          .then(json => {
            const serverTheme = json.theme || 'system';
            setCurrentTheme(serverTheme);
            applyTheme(serverTheme);
          });
      } else {
        setCurrentTheme('system');
        applyTheme('system');
      }
    };
    window.addEventListener('storage', handleJwtChange);
    return () => window.removeEventListener('storage', handleJwtChange);
  }, []);
 
  const applyTheme = (themeId) => {
    if (themeId === 'system') {
      // Apply theme based on system preference
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
    } else {
      document.documentElement.setAttribute('data-theme', themeId);
    }
  };
 
  const handleThemeChange = (themeId) => {
    setCurrentTheme(themeId);
    applyTheme(themeId);
    setIsOpen(false);
 
    // Persist to server if logged in
    const token = localStorage.getItem('token');
    if (token) {
      apiFetch('/users/me/theme', {
        method: 'PUT',
        headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
        body: JSON.stringify({ theme: themeId })
      }).catch(err => console.warn('Failed to persist theme:', err));
    }
  };
 
  const currentThemeData = themes.find(t => t.id === currentTheme);
 
  return (
    <div className="theme-selector">
      <button 
        className="theme-button" 
        onClick={() => setIsOpen(!isOpen)}
        title="Change theme"
      >
        <span className="material-symbols-outlined">{currentThemeData.icon}</span>
      </button>
 
      {isOpen && (
        <div className="theme-dropdown">
          {themes.map(theme => (
            <button
              key={theme.id}
              className={`theme-option ${theme.id === currentTheme ? 'active' : ''}`}
              onClick={() => handleThemeChange(theme.id)}
            >
              <span className="material-symbols-outlined">{theme.icon}</span>
              {theme.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}