modus-themes-react

Modus Themes Implementation in React + Vite

🎨 Theme System Overview

CRITICAL: This React + Vite application supports 6 Modus themes with proper theme switching, persistence, and hydration safety.

Available Themes: 4 Modus themes + 2 Connect themes

• modus-classic-light / modus-classic-dark
• modus-modern-light / modus-modern-dark
• connect-light / connect-dark

🏗️ Theme Architecture

✅ ThemeProvider Setup

// ✅ CORRECT: ThemeProvider in App.tsx
import { ThemeProvider } from "./contexts/ThemeContext";

function App() {
  return (
    <ThemeProvider>
      <ModusProvider>
        <Router>
          <div className="min-h-screen flex flex-col">
            <AppHeader />
            <div className="flex-1">
              <Routes>{/* Routes */}</Routes>
            </div>
            <AppFooter />
          </div>
        </Router>
      </ModusProvider>
    </ThemeProvider>
  );
}

✅ Theme Context Implementation

// ✅ CORRECT: Theme context with hydration safety
import { useEffect, useState, type ReactNode } from "react";
import { ThemeContext, type Theme } from "./ThemeContextData";

interface ThemeProviderProps {
  children: ReactNode;
}

const VALID_THEMES: Theme[] = [
  "modus-classic-light",
  "modus-classic-dark",
  "modus-modern-light",
  "modus-modern-dark",
  "connect-light",
  "connect-dark",
];

export function ThemeProvider({ children }: ThemeProviderProps) {
  const [theme, setThemeState] = useState<Theme>("modus-classic-light");
  const [mounted, setMounted] = useState(false);

  // Derived state
  const isDark = theme.includes("dark");
  const isModern = theme.includes("modern");

  // Load theme from localStorage on mount
  useEffect(() => {
    if (typeof window !== "undefined") {
      try {
        const savedTheme = window.localStorage.getItem(
          "preferred-theme"
        ) as Theme | null;

        if (savedTheme && VALID_THEMES.includes(savedTheme)) {
          setThemeState(savedTheme);
        }
      } catch (error) {
        console.warn("Unable to read stored theme preference:", error);
      }
    }
    setMounted(true);
  }, []);

  // Apply theme to document when it changes
  useEffect(() => {
    if (!mounted) return;

    const html = document.documentElement;

    // Set theme attribute (official Modus way)
    html.setAttribute("data-theme", theme);

    // Save to localStorage
    if (typeof window !== "undefined") {
      try {
        window.localStorage.setItem("preferred-theme", theme);
      } catch (error) {
        console.warn("Unable to persist theme preference:", error);
      }
    }
  }, [theme, mounted]);

  const setTheme = (newTheme: Theme) => {
    setThemeState(newTheme);
  };

  // Prevent hydration mismatch by not rendering until mounted
  if (!mounted) {
    return <>{children}</>;
  }

  return (
    <ThemeContext.Provider value={{ theme, setTheme, isDark, isModern }}>
      {children}
    </ThemeContext.Provider>
  );
}