[Theme] Layer Styles

Feature request

On Discord, the following question came up:

How can I specify coherent layer styles for light and dark mode? in regards to these docs.

Is your feature request related to a problem? Please describe.

This sounds like a great idea, but I’d prefer to not specify “success-light” and “success-dark”, and then decide which one I want to use in my client code.

Describe the solution you’d like

layerStyles should accept a function and be colormode-aware:

layerStyles: (props) => ({
  base: {
    bg: mode('gray.100', 'gray.900')(props),
  }
})

Additional context

theme.styles.global do this already.

[segunadebayo]

Thinking about this. I’d recommend using a className approach to solve this.

We append a className to document.body and you can leverage that className within the text and layer style. More like this:

const theme = {
   layerStyles: {
       base: {
           bg: "red.500",
           ".chakra-ui-dark &": {  bg: "red.300" }
      }
   }
}

Over time, we might encourage using this approach rather than the functional approach. I have some ideas around making this work but It might complicate the code a bit and I’d rather avoid it.

[dodas]

I am talking about actually implementing it, so users can do it in the theme. I can’t see a way to access the colorScheme in the styleResolver function, so I could pass it to user’s theme.