Can I set colormode in themeprovider level?

[jk7g14]

    <ThemeProvider theme={customesets.theme1}>
      <Component {...pageProps} />
    </ThemeProvider>
  )

const theme1 = {
  ...roboto,
  containers: {
    card: {
      boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      border: '1px solid',
      borderColor: 'muted',
      borderRadius: '4px',
      p: 2,
    },
    page: {
      width: '100%',
      maxWidth: '960px',
      m: 0,
      mx: 'auto',
    },
  },
  styles: {
    ...roboto.styles,
  },
  colors: {
    ...roboto.colors,
    // text: '#000',
    // background: '#fff',
    // primary: '#33e',
    revhat: 'red',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
        primary: '#cc1',
      },
      dark2: {
        text: '#fff',
        background: '#000',
        primary: '#cc1',
      },
    },
  },
}

const theme2 = {
  ...bulma,
  containers: {
    card: {
      boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      border: '1px solid',
      borderColor: 'muted',
      borderRadius: '4px',
      p: 2,
    },
    page: {
      width: '100%',
      maxWidth: '960px',
      m: 0,
      mx: 'auto',
    },
  },
  styles: {
    ...bulma.styles,
  },
  colors: {
    ...bulma.colors,
    // text: '#000',
    // background: '#fff',
    // primary: '#33e',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
        primary: '#cc1',
      },
    },
  },
}
const customsets = {
  theme1: theme1,
  theme2: theme2,
}

I want to set both theme and colormode.

I could set theme with ThemeProvider, but I could not set colormode before render.

Is there any way to achieve this? like theme1 + dark mode in initial render.

[hasparus]

Hey @jk7g14, did you try the following?

<ThemeProvider
  theme={{
    ...theme,
    initialColorModeName: colorModeName
  }}
/>

[jk7g14]

Thank you so much, it works !! You saved my day!