changing the dark mode color in chakra ui

Question

I am using the "dark mode" feature provided by the Chakra UI library. However, I can't figure out how to change the "dark mode" colors. In the documentation, I see that Chakra UI is based on something called "styled-system", so I tried to pass a new theme to themeProvider like this:

const theme = {
  ...defaultTheme,
  modes: {
    dark: {
      background: '#000',
    },
  },
};

 <ThemeProvider theme={theme}></ThemeProvider>

However, that didn't work. I also tried to wrap the modes object with a colors object, but that didn't work either. How can I customize the "dark mode" colors?

heads up that this question is a few years old and I have found the answer's code to be a bit outdated due to chakra updates over the years. this link might be helpful https://chakra-ui.com/docs/styled-system/color-mode — Thom, Aug 16 '23 at 13:29

score 24 · Accepted Answer · answered Dec 02 '20 at 07:46

in the latest version of chakra ui we can overwrite colors this way

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

const styles = {
  global: props => ({
    body: {
      color: mode('gray.800', 'whiteAlpha.900')(props),
      bg: mode('gray.100', '#141214')(props),
    },
  }),
};

const components = {
  Drawer: {
    // setup light/dark mode component defaults
    baseStyle: props => ({
      dialog: {
        bg: mode('white', '#141214')(props),
      },
    }),
  },
};

const theme = extendTheme({
  components,
  styles,
});

export default theme;

then we pass the theme into ChakraProvider

thanks for this. How can I also change the `colors` based on this? For example right now I override `colors` in `extendTheme` with `colors: {text: '#000'}`. I want 'text` to be black on light mode and white on dark mode. And I'm using it like `...` — 7ball, Jan 19 '22 at 11:38

score 1 · Answer 2 · answered Nov 08 '20 at 18:56

1

As doc say (and it actually works), you also need to wrap your component with another ColorModeProvider.

 <ThemeProvider theme={customTheme}>
      <ColorModeProvider><YourCompoent/></ColorModeProvider>
 </ThemeProvider>

And use the hook called useColorMode inside your component (or nested if you wish) to get current color mode and toggle between.

const { colorMode, toggleColorMode } = useColorMode();

answered Nov 08 '20 at 18:56

FluffyArt

11
2

1

It seems that the ChakraProvider replaces both the ThemeProvider and the ColorModeProvider in current versions of Chakra-UI https://chakra-ui.com/docs/migration#2-update-the-themeprovider – vancy-pants Dec 15 '21 at 18:52

score 0 · Answer 3 · answered Oct 21 '22 at 21:54

Just in case you want to override only the dark mode background without affecting the default value of the light mode you can retrieve the theme props like the following:

import type { StyleFunctionProps } from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';

const styles = {
  global: (props: StyleFunctionProps) => ({
    body: {
      // sets a custom bg color for dark mode only
      bg: mode(
        // light mode value retrieved from theme
        props.theme.semanticTokens.colors['chakra-body-bg']._light,
        // your custom value for dark mode
        '#252C32',
      )(props),
    },
  }),
};

changing the dark mode color in chakra ui

3 Answers3