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

user_15377381 0
Viewed 847

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?

chakra-ui reactjs
2 Answers

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.

user_180780650

For chakra V2, we can use css variables in global object (which give us access to colorMode). Attention, colors object is still necessary for ChakraUI to interpret css variables, however the real colors:

import { extendTheme } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';

const theme = extendTheme({
styles: {
    global: (props) => ({
        body: {
            bg: mode('#FDFDFF', '#212121')(props),
        },
        ':root': {
            '--chakra-colors-primary-400': mode(
                '#7C82FB',
                '#94d3ac',
            )(props),
            '--chakra-colors-primary-500': mode(
                '#5F63FC',
                '#29c7ac',
            )(props),
        },
    }),
},
// colors object is declared so chakra interprets it as css variables
// however real colors is defined in ':root' with darkmode conditions
colors: {
    primary: {
        400: '#7C82FB',
        500: '#5F63FC',
    },
    success: {
        500: '#21bf73',
    },
    danger: {
        500: '#FA4243',
    },
},
});
user_61284070
Related