Manifold CSS Variables

Making widget styling easier across Manifold widgets.

This section assumes you have basic HTML and CSS knowledge.

Manifold aims to provide an easy way for anyone who embeds Manifold widgets to customise their look and feel, with minimal custom CSS. All you need to do is set the Manifold CSS variables to the desired values in your CSS and the embedded widgets will respond accordingly.

These variables are located in the :root , .manifold-scheme-light, and .manifold-scheme-dark scopes.

For example, to change the primary colour accents of a widget, you can use the --manifold-theme--color--primary variable. To change base font-family used across Manifold widgets, you can use the --manifold-text--font-family--body and --manifold-text--font-family--header variables.

To apply these variables globally, you just need to add them to your CSS rules. For example:

.manifold {
  --manifold-theme--color--primary: hsl(220deg 70% 50%);
  --manifold-text--font-family--body: "Segoe UI", Helvetica, Arial, sans-serif;
  --manifold-text--font-family--header: Alegreya, "Times New Roman", serif;
}