Dark mode

Casper UI supports dark mode, as it extends the built in support from Chakra UI. By default the theme is set to light mode, and needs to be manually toggled.

The default Casper UI color theme includes dark mode colors. But when using custom theme colors (type of the colors-prop provided to <ThemeProvider>) they must include a dark mode version per color to work as expected.

Note

From the Chakra UI Docs: Color mode is stored in localStorage and appends a class="dark" or class="light" to the root html element to ensure the color mode is persistent.

In case you need to reset the color mode, you must delete the item from localStorage or cookies, so on next page load the value is initialized like the first time user visited the page.

Read and Toggle dark and light mode using the useColorMode-hook

Import the useColorMode-hook from the theme to control the color mode in your application.

• To toggle between dark and light mode, call the toggleColorMode-function returned from the hook.
• To get the current color mode, use the colorMode-property returned from the hook.

Example usage:

import { useColorMode, FormControl, FormLabel, Switch } from "@caspeco/casper-ui-library";

function ToggleDarkModeSwitch() {
  const { colorMode, setColorMode } = useColorMode();
  return (
    <FormControl display="flex">
      <FormLabel>Use Dark Mode</FormLabel>
      <Switch
        isChecked={colorMode === "dark"}
        onCheckedChange={({ checked }) => setColorMode(checked ? "dark" : "light")}
      />
    </FormControl>
  );
}