'How can I set different color for light and dark Chakra-UI themes?

I am using the Chakra-UI theme and going to customize the light and dark themes' colors.
I don't know the way of about set different colors for light and dark themes.
For example, I am going to set different color values for light and dark themes, like below.

import { extendTheme, ChakraProvider } from "@chakra-ui/react"

const lightThemeColor = {
  gray: {
    500: '#828288',
    800: '#171822',
  }
}

const darkThemeColor = {
  gray: {
    500: '#75B046',
    800: '#1E1F2B',
  }
}

const theme = extendTheme({
  lightTheme: lightThemeColor,  // <== unfortunately, there isn't lightTheme key for setting light Theme.
  darkTheme: darkThemeColor
})

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

I don't know how to set light theme and dark theme color. How can I set the light and dark theme colors?

reactjs chakra-ui

Solution 1:^[1]

This mightbe helpful for your problme. https://chakra-ui.com/docs/styled-system/features/color-mode

export default class Document extends NextDocument {  render() {
return (
  <Html lang='en'>
    <Head />
    <body>
      {/* ? Here's the script */}
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <Main />
      <NextScript />
    </body>
  </Html>
)

} }

create global state for managing initialColorMode and change its value.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	StormyTalent

'How can I set different color for light and dark Chakra-UI themes?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]