develop

Using themes

Plug n'play colors for your product

Themes are a set of predefined keys which should be used whenever the color should be dynamic based on the current active theme. They are used to customize component styles to fit the specific aesthetic of a brand or product. Wanda provides two themes, light and dark, both combined into a single css file.

How to use themes

To enable themes you only need to include a single-file theme within your application.

A theme is activated by importing the css file inside your project. Once you include the file all the theme keys will be available as custom properties, eg. var(--global-foreground).

import "@wonderflow/react-components/themes.css";

This file contains both the light and dark themes which are activated based on the data-theme attribute:

:root,
[data-theme="light"] {
  /* light theme values */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* dark theme values */
  }
}

[data-theme="dark"],
:root[data-theme="dark"] {
  /* dark theme values */
}

css

The above CSS works this way:

light: activated when data-theme is set to light
dark: activated when data-theme is set to dark
light/dark: automatically activated based on the user's system preferences when data-theme is not "light" or "dark", or when there is not the attribute at all and the theme.css is included.

Advanced usage

If needed, you can also import the json format of the theme and use the theme keys inside javascript, however this is not recommended as you should use css strings whenever possible.

import LightTheme from "@wonderflow/react-components/themes/light.json";

export default () => (
  <div style={{ color: LightTheme["dimmed-5"] }}>I'm dimmed</div>
  /* Use style={{ color: 'var(--dimmed-5)' }} whenever possible */
);

jsx

Keep in mind

Json themes are only meant to be used inside javascript for special use cases, you still need to import the css version to enable the theme.

Theme switching

To switch between light and dark theme you just have to add the data-theme attribute to the document root, or, you can add it on any element on the page, everything inside the element with the attribute will use the theme declared.

Taking this example:

<!DOCTYPE html>
<!--
Everything that is not "light" or "dark"
will use the system preferences.
The document will use the light or dark theme
based on the system preference.
-->
<html data-theme="auto">
  <body>
    <div>I'm light</div>

    <!-- Everything inside .Hero will use the dark theme -->
    <div class="Hero" data-theme="dark">I'm dark</div>
  </body>
</html>

html

Providing the UI pattern to switch the theme, and handling the attribute application, is up to the consumer.