Light & Dark Mode

You can manage light and dark mode in three different ways depending on your use case:

​

Using the dashboard

You can set your theme in our Dashboard, under the “Style” heading, where you see the toggle for “Light” or “Dark”.

​

Using DynamicContextProvider

While you can set your theme in our Dashboard, a lot of site support users switching between light and dark theme and it’s important that our SDK updates to match the theme of the site.

You can update whether you want to show the Light or Dark theme to customers by passing a prop to DynamicContextProvider with theme:

<DynamicContextProvider
  theme='dark', <-- you can pass either 'dark' or 'light'
  settings={{
    environmentId: "<<sandboxEnvironmentId>>",
    appName: "<<projectName>>",
    appLogoUrl: "...",
  }}>
  <HomePage />
</DynamicContextProvider>

​

Using CSS directly

The root element of your application (perhaps body) will have a data-dynamic-theme variable set. You can override this at any time to adjust the theme to light or dark mode. There is also an “auto” value which will adapt to whatever is set in []prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).