Themes & Settings

Dynamic offers beautiful themes in both light, dark, or auto themes with the ability to customize the colors and styles to your liking, all through your developer dashboard.

Simply go to the design page in your dashboard and toggle from the current list of settings (more customizations will be coming soon).

You can toggle between:

1. Themes
2. Light and dark theme
3. Your brand color
4. Subtle/Bold

​

Light & Dark Modes

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).