91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { createContext, useContext, useEffect, useState } from 'react';
|
||
|
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
type Theme = 'light' | 'dark';
|
||
|
|
type Accent = 'sage' | 'cobalt' | 'terracotta' | 'graphite';
|
||
|
|
|
||
|
|
interface AccentTokens {
|
||
|
|
brand: string;
|
||
|
|
deep: string;
|
||
|
|
soft: string;
|
||
|
|
softInk: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ACCENTS: Record<Accent, AccentTokens> = {
|
||
|
|
sage: { brand: '#2f6b4a', deep: '#1e4a32', soft: '#e6efe8', softInk: '#1e4a32' },
|
||
|
|
cobalt: { brand: '#2e5aa8', deep: '#1d3d75', soft: '#e4eaf5', softInk: '#1d3d75' },
|
||
|
|
terracotta: { brand: '#b55438', deep: '#7d3825', soft: '#f6e6de', softInk: '#7d3825' },
|
||
|
|
graphite: { brand: '#2c2c28', deep: '#000000', soft: '#e8e6df', softInk: '#2c2c28' },
|
||
|
|
};
|
||
|
|
|
||
|
|
interface ThemeContextValue {
|
||
|
|
theme: Theme;
|
||
|
|
accent: Accent;
|
||
|
|
setTheme: (t: Theme) => void;
|
||
|
|
setAccent: (a: Accent) => void;
|
||
|
|
toggleTheme: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ThemeContext = createContext<ThemeContextValue | null>(null);
|
||
|
|
|
||
|
|
export function useTheme(): ThemeContextValue {
|
||
|
|
const ctx = useContext(ThemeContext);
|
||
|
|
if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
|
||
|
|
return ctx;
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyAccent(accent: Accent) {
|
||
|
|
const ac = ACCENTS[accent];
|
||
|
|
const r = document.documentElement.style;
|
||
|
|
r.setProperty('--brand', ac.brand);
|
||
|
|
r.setProperty('--brand-deep', ac.deep);
|
||
|
|
r.setProperty('--brand-soft', ac.soft);
|
||
|
|
r.setProperty('--brand-soft-ink', ac.softInk);
|
||
|
|
r.setProperty('--viz-1', ac.brand);
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||
|
|
const [theme, setThemeState] = useState<Theme>('light');
|
||
|
|
const [accent, setAccentState] = useState<Accent>('sage');
|
||
|
|
|
||
|
|
// Hydrate from localStorage on mount (server renders light/sage defaults).
|
||
|
|
useEffect(() => {
|
||
|
|
const savedTheme = (localStorage.getItem('mt-theme') as Theme | null) ?? 'light';
|
||
|
|
const savedAccent = (localStorage.getItem('mt-accent') as Accent | null) ?? 'sage';
|
||
|
|
setThemeState(savedTheme);
|
||
|
|
setAccentState(savedAccent);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// Sync theme to DOM + localStorage.
|
||
|
|
useEffect(() => {
|
||
|
|
document.documentElement.setAttribute('data-theme', theme);
|
||
|
|
localStorage.setItem('mt-theme', theme);
|
||
|
|
}, [theme]);
|
||
|
|
|
||
|
|
// Sync accent to DOM + localStorage.
|
||
|
|
useEffect(() => {
|
||
|
|
applyAccent(accent);
|
||
|
|
localStorage.setItem('mt-accent', accent);
|
||
|
|
}, [accent]);
|
||
|
|
|
||
|
|
function setTheme(t: Theme) {
|
||
|
|
setThemeState(t);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setAccent(a: Accent) {
|
||
|
|
setAccentState(a);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleTheme() {
|
||
|
|
setThemeState((prev) => (prev === 'light' ? 'dark' : 'light'));
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ThemeContext.Provider value={{ theme, accent, setTheme, setAccent, toggleTheme }}>
|
||
|
|
{children}
|
||
|
|
</ThemeContext.Provider>
|
||
|
|
);
|
||
|
|
}
|