Semantic tokens don't work with DarkMode and LightMode component

Description

Semantic tokens don’t work with DarkMode component.

Link to Reproduction

https://codesandbox.io/s/intelligent-thompson-563p3?file=/src/index.tsx

Steps to reproduce

This code is not working:

const App = () => (
  <ChakraProvider
    theme={extendTheme({
      semanticTokens: {
        colors: {
          text: {
            default: "red.700",
            _dark: "red.200"
          }
        }
      }
    })}
  >
    <DarkMode>
      <GlobalStyle />
      <Heading color="text">Welcome to Chakra + TS</Heading>
    </DarkMode>
  </ChakraProvider>
);

1. Go to ‘https://codesandbox.io/s/intelligent-thompson-563p3?file=/src/index.tsx’
2. Heading should be in light red.

Chakra UI Version

1.8.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[TimKolberger]

This is currently a documented edge case.

The CSS variables are attached to the host element (CSS selector :host, :root) and cannot react to the components <LightMode /> and <DarkMode />, data-theme attributes nor body class .chakra-ui-dark. It listens to e.g. html[data-theme=“dark”]. - Docs

We are working on a feature to re-attach the css vars to an element to create a new token layer - this would enable the semantic tokens to react to data-theme attributes.

[TimKolberger]

It was released with a slight twist.

The css variables need a DOM Element to attach them again. The LightMode and DarkMode components do not render an Element, they render only a React Context Provider. Rendering the Element inside of DarkMode would be a breaking change and would introduce a circular dependency.

This code example shows how to use the _dark values of your Semantic Tokens.

<DarkMode>
  <div data-theme="dark">
    <chakra.div color="your-semantic-token">
      This uses always the _dark value of your semantic token
    </chakra.div>
  </div>
</DarkMode>

We know that this API is not the most intuitive, and we will revisit this API in the future.