Page specific color mode

The default way to add color mode in your application or website is to wrap it in the ChakraProvider which provides a way to change the color mode to light or dark depending on system/user preferences.

In reality, you might run into scenarios where you want to lock a page to a specific color mode (light or dark).

A combination of LightMode or DarkMode components and the undocumented GlobalStyle component can help you achieve this.

The GlobalStyle component provides the styles defined in theme.styles.global to the elements on entire page.

Note 🚨: The caveat of this approach is that you won't be able to switch between color modes. You're effectively "locking" the mode.

Let's say we want to lock the page to light mode, you can import the LightMode component and wrap the page within it.

import { LightMode, GlobalStyle } from '@chakra-ui/react';

function Page() {
  return (
    <LightMode>
      <GlobalStyle />
      {/* rest of your page */}
    </LightMode>
  );
}