Changing Modal Background Colour

[MattHeslington]

Hello,

What's the best way to change the background colour of a modal? Nothing I've done so far works. I was led to believe Chakra and Tailwind worked well together, but it seems a large percentage of components don't accept Tailwind classNames, including the Modal.

Thanks for any help.
Matt

[with-heart]

Hi @MattHeslington, any way you could provide a CodeSandbox reproduction? Chakra is inspired in many ways by Tailwind but I have no idea about the direct integration of the two.

[MattHeslington]

Hello Mark,

Many thanks for replying to me. The issue is not regarding Tailwind really, I'd just like to change the colour of the Chakra modal window (ideally to the standard dark theme background, #19202D I believe. Is there an easy way to do this please? I have a feeling I'm missing something completely obvious! Also, would you know of where I can view a complete sample theme.js file for Chakra, as I would like to change a couple of other defaults if possible?

Kind regards,
Matt

[with-heart]

No problem Matt!

Here's an example of overriding the colors of Modal: https://codesandbox.io/s/pedantic-cerf-78ecw?file=/src/App.tsx. They're actually set on the ModalContent component.

You can see the default Chakra theme definition here: https://github.com/chakra-ui/chakra-ui/blob/47ea2ee70d939fa6cae06d0faa63553b55170c81/packages/theme/src/index.ts. It's broken up between various files for organization purposes.

You can use the extendTheme function to override various pieces of the default theme:

import { extendTheme } from '@chakra-ui/core'

const theme = extendTheme({
  components: {
    Foo: {
      baseStyle: {
        color: 'red.500',
      },
    },
  },
})

Currently you'll probably run into some issues if you're trying to use extendTheme for things in theme.components because many of them are functions. We have a change coming in the next release (hopefully out soon) that will correctly merge your objects/functions with any of the default theme's functions. Just so you're aware :)

[MattHeslington]

That's excellent Mark, many thanks for your help!