‌
‌

Force a light or dark theme

Beniamino Marini

Product Designer

Sometimes in a Layout, you want to add a little bit of contrast (anyone said marketing CTA?).

Wanda supports light and dark themes out-of-the-box: this is especially useful to change the theme of just a specific component — and it's as easy as adding data-theme="dark" (or light).

I'm forced to dark mode

I change with the global theme

I'm forced to light mode

How is it possible?

Wanda's themes.css includes both the light and the dark theme, make sure to import it in your entry point — More info on the dedicated page

import '@wonderflow/react-components/themes.css'

<footer data-theme="dark">
  ...
</footer>

html

Unfortunately getting the opposite scheme of the system scheme is not supported out of the box, it's something that requires some custom Javascript

A real-world example

On the Wonderflow website, we use the light theme as our theme. The footer uses the forced data-theme to dark — this way we get for free a curated dark color schema with no need to write additional custom CSS.