Two themes - dark and light - are provided, dark being the default theme.

A particular mode can be defined by setting a corresponding attribute theme on the root html element.

<!doctype html>
<html lang="en" theme="dark"></html>


To init the theme as fast as possible, and therefore to avoid FOUC, we advise to add the following code snippet in your HTML pages.

<!-- Init theme as fast as possible -->
  try {
    const isDarkPreferred = window.matchMedia(
      "(prefers-color-scheme: dark)"

    const currentTheme =
      localStorage.nnsTheme === null ||
      localStorage.nnsTheme === undefined ||
      localStorage.nnsTheme === ""
        ? undefined
        : JSON.parse(localStorage.nnsTheme);

      currentTheme ?? (isDarkPreferred ? "dark" : "light")
  } catch (error) {
    console.error("Error initializing theme", error);


An opinionated Theme Toggle component is provided to add a theme switcher to your dapp easily.