[Mantine] Color Scheme

You can easily toggle color scheme on $Mantine$. Here is the order of how to do so.

1. get current color scheme.
2. toggle color scheme.
3. set color scheme on local storage.

1. Get current color scheme

$Mantine$ provides a hook for this and it's very easy to use. useMantineColorScheme() has useful keys like this;

function useMantineColorScheme(): {
  /** Current color scheme value */
  colorScheme: 'dark' | 'light' | 'auto';

  /** Sets colors scheme to given value */
  setColorScheme: (colorScheme: 'dark' | 'light' | 'auto') => void;

  /** Toggle color scheme to the opposite value, if value is 'auto', color scheme is inferred from the OS settings */
  toggleColorScheme: () => void;

  /** Clears color scheme value from storage and sets it to `defaultColorScheme` */
  clearColorScheme: () => void;
};

From here, we can only need colorScheme and toggleColorScheme().

Let's get them using destructuring object.

const { colorScheme, toggleColorScheme } = useMantineColorScheme();

2 - 3. Toggle color scheme & save it to local storage

Make a simple button component to toggle color scheme. define click handler to easily read the code later.
By setting inverted color scheme, we don't need to unnecessarilly re render.

export const HomeButton = () => {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const clickHandler = () => {
    toggleColorScheme();
    const invertedColorScheme = colorScheme === "dark" ? "light" : "dark";
    localStorage.setItem("color-scheme", invertedColorScheme);
  };
  return <Button onClick={clickHandler}>this is a button</Button>;
};

Finally,

Let's check if everything is well set up for the color scheme.
MantineProvider has to have colorSchemeManager to apply color scheme from local storage.

const mantineProviderProps: MantineProviderProps = {
  colorSchemeManager: localStorageColorSchemeManager({ key: "color-scheme" }),
};

And put this props to MantineProvider.

const MantineThemeProvider = ({ children }: Props) => (
  <MantineProvider {...mantineProviderProps}>{children}</MantineProvider>
);

Or just directly put colorSchemeManager to MantineProvider` props.

<MantineProvider
colorSchemeManager={
  localStorageColorSchemeManager({ key: "color-scheme" })
} >
  {children} </MantineProvider>