62 lines
2.8 KiB
JavaScript
62 lines
2.8 KiB
JavaScript
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||
|
|
import { createContext, useState, useEffect } from 'react';
|
||
|
|
import { ThemeProvider as SCThemeProvider } from '@lilith/ui-styled-components';
|
||
|
|
import { cyberpunkAdapter } from '../adapters/cyberpunk-adapter';
|
||
|
|
import { luxeAdapter } from '../adapters/luxe-adapter';
|
||
|
|
import { lilithAdapter } from '../adapters/lilith-adapter';
|
||
|
|
import { synthwaveAdapter } from '../adapters/synthwave-adapter';
|
||
|
|
import { synthwaveLightAdapter } from '../adapters/synthwave-light-adapter';
|
||
|
|
import { neutralThemeAdapter } from '../adapters/neutral-adapter';
|
||
|
|
import { corporateThemeAdapter } from '../adapters/corporate-adapter';
|
||
|
|
import { creatorPortalThemeAdapter } from '../adapters/creator-portal-adapter';
|
||
|
|
import { pitchDeckAdapter, pitchDeckLightAdapter } from '../adapters/pitch-deck-adapter';
|
||
|
|
import { createCustomTheme } from '../utils/merge-theme';
|
||
|
|
import { ThemeCssVariables } from './ThemeCssVariables';
|
||
|
|
const THEME_REGISTRY = {
|
||
|
|
cyberpunk: cyberpunkAdapter,
|
||
|
|
luxe: luxeAdapter,
|
||
|
|
lilith: lilithAdapter,
|
||
|
|
synthwave: synthwaveAdapter,
|
||
|
|
'synthwave-light': synthwaveLightAdapter,
|
||
|
|
neutral: neutralThemeAdapter,
|
||
|
|
corporate: corporateThemeAdapter,
|
||
|
|
'creator-portal': creatorPortalThemeAdapter,
|
||
|
|
'pitch-deck': pitchDeckAdapter,
|
||
|
|
'pitch-deck-light': pitchDeckLightAdapter,
|
||
|
|
};
|
||
|
|
const VALID_THEMES = Object.keys(THEME_REGISTRY);
|
||
|
|
function getThemeAdapter(name) {
|
||
|
|
return THEME_REGISTRY[name] ?? THEME_REGISTRY.cyberpunk;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Theme context - internal, use useTheme() hook instead
|
||
|
|
*/
|
||
|
|
export const ThemeContext = createContext(undefined);
|
||
|
|
export const ThemeProvider = ({ children, themeName: controlledThemeName, defaultTheme = 'cyberpunk', storageKey = 'app-theme', cssVariables = false, customTheme, }) => {
|
||
|
|
const [internalThemeName, setThemeName] = useState(() => {
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
const stored = localStorage.getItem(storageKey);
|
||
|
|
if (stored && VALID_THEMES.includes(stored)) {
|
||
|
|
return stored;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return defaultTheme;
|
||
|
|
});
|
||
|
|
const themeName = controlledThemeName ?? internalThemeName;
|
||
|
|
const baseTheme = getThemeAdapter(themeName);
|
||
|
|
const theme = customTheme
|
||
|
|
? createCustomTheme(baseTheme, customTheme)
|
||
|
|
: baseTheme;
|
||
|
|
useEffect(() => {
|
||
|
|
if (typeof window !== 'undefined') {
|
||
|
|
localStorage.setItem(storageKey, themeName);
|
||
|
|
}
|
||
|
|
}, [themeName, storageKey]);
|
||
|
|
const contextValue = {
|
||
|
|
theme,
|
||
|
|
themeName,
|
||
|
|
setTheme: setThemeName,
|
||
|
|
};
|
||
|
|
return (_jsx(ThemeContext.Provider, { value: contextValue, children: _jsxs(SCThemeProvider, { theme: theme, children: [cssVariables && _jsx(ThemeCssVariables, {}), children] }) }));
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=ThemeProvider.js.map
|