0

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

0 Answers0