[ColorModeProvider, ThemeProvider] Changing default dark mode colors

[najibghadri]

First of all really nice work!
This is not a bug, but after reading the docs and the code of both components and theme files I couldn't find the way to change the default dark mode colors, for example the background color.

I suppouse it is a theme that is defined somewhere, and I image I could redefine it with a customDarkTheme like it is done with themes, then maybe somehow set it as the dark theme with ColorModeProvider.

Is this something I can already change somehow or still under work? Thanks

[segunadebayo]

Hi @najibghadri,

Thanks for bringing this up. We've found a good solution for this already in preparation for the next release, so it has been solved.

In the meantime, the CSSReset component takes a config prop that allows you to configure this. Sadly, we' don't have documentation for that.

Kindly check here:
https://github.com/chakra-ui/chakra-ui/blob/master/packages/chakra-ui/src/CSSReset/index.js

[najibghadri]

Awesome, thanks, it worked out! :)

[sumdook]

Hi!

The link above seems unreachable now, and upon going through the current CSS reset file (https://github.com/chakra-ui/chakra-ui/blob/master/packages/css-reset/src/css-reset.tsx) I can't seem to find any config prop.

Are there any resources/code I can read on how to change the dark mode defaults in the current version?

[with-heart]

@sumdook By current version, do you mean 0.8.0 or 1.0.0-rc.0?

[sumdook]

I completely missed this notif! I meant 0.8.0.

I have temporarily changed the default gray theme colors (which is where the dark components seems to take it's colors from) to match my UI theme.

[lxbdr]

Hi, I ran into the same issue and don't quite get how to change the background color for dark mode. Could someone help me out with some details what exactly I need to do?

[sumdook]

@lxbdr

I did something very hacky (because it was for a small side project), there is probably a better way to do it.

E.g I noticed the background color for the menu component was the same as gray.700 from the default theme. So I figured If I override the gray.700 from default theme, it'll change the bg for all menu in my project.

[Sreenivas1323]

Hi @najibghadri,

Thanks for bringing this up. We've found a good solution for this already in preparation for the next release, so it has been solved.

In the meantime, the CSSReset component takes a config prop that allows you to configure this. Sadly, we' don't have documentation for that.

Kindly check here:
https://github.com/chakra-ui/chakra-ui/blob/master/packages/chakra-ui/src/CSSReset/index.js

So, I have been checking Chakra-Ui lately, and i wish i could play with the themes, and the link of the master-chakra ui have been not working, can you provide someother?
Thanks

[ljosberinn]

@Sreenivas1323 I'm not entirely sure what you're looking for in parcitular so here's a link to the documentation of the default theme for the upcoming v1 release: https://next.chakra-ui.com/docs/theming/theme

[Sreenivas1323]

@Sreenivas1323 I'm not entirely sure what you're looking for in parcitular so here's a link to the documentation of the default theme for the upcoming v1 release: https://next.chakra-ui.com/docs/theming/theme

Hey, Thanks for the reply, I was particularly looking for the ways to include new themes, or changing the background colors of
default light or the dark themes, Can you help me out with this?
Thanks!

[ljosberinn]

Chakra at this time only supports light | dark color modes. You can customize the theme as described here: https://next.chakra-ui.com/docs/theming/customize-theme - please make sure that the object you pass to extendTheme matches the default structure. In your case, to change the background colors, you'll want something like:

<ChakraProvider theme={extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: mode('white', 'black')(props),
        color: mode('black', 'white')(props),
      },
    }),
  },
})}>
  ...
</ChakraProvider>

with mode being import { mode } from '@chakra-ui/theme-tools'

[Sreenivas1323]

Chakra at this time only supports light | dark color modes. You can customize the theme as described here: https://next.chakra-ui.com/docs/theming/customize-theme - please make sure that the object you pass to extendTheme matches the default structure. In your case, to change the background colors, you'll want something like:

<ChakraProvider theme={extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: mode('white', 'black')(props),
        color: mode('black', 'white')(props),
      },
    }),
  },
})}>
  ...
</ChakraProvider>

with mode being import { mode } from '@chakra-ui/theme-tools'

Awesome! Thanks alot!!, It works!, had a tough time figuring it out! 👍 :)

[jasonadkison]

Here's how I was able to set component level defaults depending on color mode. I didn't see this documented specifically.

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

// setup light/dark mode global defaults
const styles: Styles = {
  global: (props) => ({
    body: {
      color: mode('gray.800', 'whiteAlpha.900')(props),
      bg: mode('white', 'gray.900')(props)
    }
  })
};

const components = {
  Link: {
    // setup light/dark mode component defaults
    baseStyle: (props: GlobalStyleProps) => ({
      color: mode('blue.400', 'blue.300')(props)
    })
  }
};

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

[bryanltobing]

the documentation should explain this thing clearly

[with-heart]

@bryantobing12 PRs always welcome!

[voyagebagage]

is there a way to make that below working ?

colors:{
primary: mode("pink","blue")(props),
secondary etc...
}

because the result is that I have to have a primaryDark color and all my components are filled with

 export const ButtonStyles = {
 variants: {
    primary: (props) => ({
    mode("primary","primaryDark")(props)
    }),
    },
    }

....