I created themes:
const light = createTheme({
type: 'light',
theme: {
breakpoints: {
md: '1080px',
},
},
})
const dark = createTheme({
type: 'dark',
theme: {
breakpoints: {
md: '1080px',
},
},
})
export { dark, light }
Use it in ThemeProvider:
import { dark, light } from 'app/lib/theme'
<ThemeProvider
attribute="class"
value={{
light,
dark,
}}
>
<NextUIProvider >
<Component {...pageProps} />
</NextUIProvider>
</ThemeProvider>
But when I get theme (from useTheme) in console.log I receive this:
{
"xs": {
"token": "xs",
"value": "650px",
"scale": "breakpoints",
"prefix": "nextui"
},
"sm": {
"token": "sm",
"value": "960px",
"scale": "breakpoints",
"prefix": "nextui"
},
"md": {
"token": "md",
"value": "1280px",
"scale": "breakpoints",
"prefix": "nextui"
},
"lg": {
"token": "lg",
"value": "1400px",
"scale": "breakpoints",
"prefix": "nextui"
},
"xl": {
"token": "xl",
"value": "1920px",
"scale": "breakpoints",
"prefix": "nextui"
}
}
Why? How to customize breakpoints? I see this page https://nextui.org/docs/theme/media and information from the page is absolutely useless.
But if I change background in theme - its working