Looking to customize spacing variables in a Chakra UI theme?
I have successfully implemented various extensions, but changes to spacing are not being applied.
const config: ThemeConfig = {
initialColorMode: 'light',
useSystemColorMode: false,
}
const myNewTheme = {
styles: {
global: {
body: {
bg: 'bgLight',
},
},
},
colors,
fonts: {
body: 'Bitter, serif',
heading: 'Poppins, sans-serif',
},
fontSizes: {
vw1: 'calc(max(16vw, 2rem))',
},
space: {
spacing: {
96: '28rem',
112: '32rem'
},
},
breakpoints,
components: {
Button,
Heading,
},
}
const fsiTheme = extendTheme(myNewTheme, { config })
export default fsiTheme
I also attempted the following:
spacing: {
space: {
96: '28rem',
112:'32rem'
},
},