🚧 Landing pages building blocks https://landing-blocks.now.sh
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

73 lines
1.6 KiB

import {
ColorModeProvider,
CSSReset,
DefaultTheme,
FlexProps,
Stack,
} from '@chakra-ui/core'
import React from 'react'
import { PropagatedThemeProvider } from './layout'
export interface ThemeExtension extends DefaultTheme {
colors: {
primary: string
secondary: string
} & DefaultTheme['colors']
sizes: {
pageContainer: any
} & DefaultTheme['sizes']
}
export type LandingProviderProps = {
dark?: boolean
primary?: string
secondary?: string
pageWidth?: string
children?: any
} & FlexProps
/*
should customize
- font type
- font family
- buttons border radius
- primary color for buttons, illustrations, etc
- secondary color, for gradients, etc
- dark background mode
- black color for text, ...
- white color for text, ... if dark mode
*/
export function LandingProvider({
dark = false,
primary = 'purple',
secondary = 'purple',
pageWidth = '1200px',
children,
...rest
}: LandingProviderProps) {
const theme = {
colors: {
primary,
secondary,
},
sizes: {
pageContainer: pageWidth,
},
}
return (
<PropagatedThemeProvider theme={theme}>
<ColorModeProvider value={dark ? 'dark' : 'light'}>
<CSSReset />
<Stack
overflowX='hidden'
fontFamily='Roboto, Arial'
spacing='60px'
{...rest}
>
{children}
</Stack>
</ColorModeProvider>
</PropagatedThemeProvider>
)
}