43 lines
1.1 KiB
TypeScript
Executable file
43 lines
1.1 KiB
TypeScript
Executable file
// import { colors, colorsType } from '@/lib/theme-colors';\
|
|
import {colors, colorsType} from '../src/lib/theme-colors';
|
|
import React, { createContext, useContext, useState, ReactNode } from 'react';
|
|
|
|
// 1. Define the theme type
|
|
export type Theme = {
|
|
colors: colorsType;
|
|
// Add more theme-level properties as needed (e.g., font, spacing)
|
|
};
|
|
|
|
// 2. Default theme object
|
|
export const defaultTheme: Theme = {
|
|
colors: colors,
|
|
// Add more theme-level defaults here
|
|
};
|
|
|
|
// 3. Create the context
|
|
const ThemeContext = createContext<{
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
}>({
|
|
theme: defaultTheme,
|
|
setTheme: () => {},
|
|
});
|
|
|
|
// 4. Provider component
|
|
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
|
const [theme, setTheme] = useState<Theme>(defaultTheme);
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
// 5. useTheme hook
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext);
|
|
if (!context) {
|
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
}
|
|
return context;
|
|
}
|