How Tos

Themes

Themes (Dark Mode)

A dark mode option can make your application more accessible and comfortable to use. It is good practice to provide a dark mode option in your application.

The WFPCoreProvider component is the root component of the WFP Core Design System. It provides the theme to all the components in the application.

It specially benefits users in the field who are using phones with OLED displays by increasing the battery life of the device.

Initial theme

The initial theme can be set by passing the initialTheme prop to the WFPCoreProvider component. The default value is auto. The auto value will use the system theme if the browser supports it.

<WFPCoreProvider initialTheme="light">...</WFPCoreProvider>

Persistence

By default the theme is persisted in the local storage. This means that the theme will be the same when the user opens the application again. If you don’t want to persist the theme, you can pass the persistTheme prop to the WFPCoreProvider component.

Changing the theme

The theme can be used by the useTheme hook. The useTheme hook returns the current theme and a function to change the theme.

Expand code

Editable Example

const ChangeTheme = () => {
  const { theme, setTheme } = useTheme();

  return (
    <>
      <p>Current theme: {theme}</p>
      <Button onClick={() => setTheme("light")}>
        Light
      </Button>{" "}
      <Button onClick={() => setTheme("dark")}>
        Dark
      </Button>{" "}
      <Button onClick={() => setTheme("auto")}>
        Auto
      </Button>
    </>
  );
};

render(
  <div id="rootEl">
    <WFPCoreProvider
      initialTheme="light"
      wrapperElements={document.getElementById(
        "rootEl"
      )}
    >
      <ChangeTheme />
    </WFPCoreProvider>
  </div>
);

The setTheme function accepts a Theme value as an argument. The Theme type is defined as follows and can be extended by custom themes:

type Theme = "auto" | "light" | "dark";

CSS (sass)

The WFPCoreProvider will automatically inject CSS classes to the body element. The CSS classes are prefixed with wfp- and the theme name. If set to dark the class will be wfp--theme--dark. When the theme is set to auto the class will switch between wfp--theme--light and the wfp--theme--dark depending on the system theme.

Custom themes in CSS (sass)

@use "PATH_TO_YOUR_THEME/dark-css-theme" as darktheme;


body {
  @include defaulttheme.theme-default();
  &.wfp--theme--dark {
    color-scheme: dark;
    @include darktheme.theme-dark();
  }
}

Related

On this page