46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import { createContext, useContext } from 'react';
|
|
|
|
const ThemeContext = createContext();
|
|
|
|
export function ThemeProvider({ children }) {
|
|
const theme = {
|
|
colors: {
|
|
primary: {
|
|
main: 'text-primary-600',
|
|
hover: 'hover:text-primary-700',
|
|
bg: 'bg-primary-600',
|
|
bgHover: 'hover:bg-primary-700',
|
|
},
|
|
neutral: {
|
|
text: 'text-neutral-600',
|
|
heading: 'text-neutral-900',
|
|
bg: 'bg-neutral-50',
|
|
border: 'border-neutral-200',
|
|
},
|
|
accent: {
|
|
main: 'text-accent-600',
|
|
bg: 'bg-accent-600',
|
|
light: 'bg-accent-50',
|
|
},
|
|
},
|
|
typography: {
|
|
h1: 'text-4xl font-display font-bold tracking-tight',
|
|
h2: 'text-2xl font-display font-semibold',
|
|
h3: 'text-xl font-display font-semibold',
|
|
body: 'text-base text-neutral-600',
|
|
small: 'text-sm text-neutral-500',
|
|
},
|
|
spacing: {
|
|
section: 'py-12 md:py-20',
|
|
container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={theme}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export const useTheme = () => useContext(ThemeContext);
|