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;
}

It's that easy! Manifold provides a range of variables for you to choose from, so you can customise your widgets to your heart's content.

List of Manifold CSS Variables

Supported Widgets

The following table describes the widgets, along with their minimum required version, which support being styled by the Manifold CSS Variables.

Widget name	Minimum Supported Version (inclusive)
Connect	2.1.0
Campaign	0.1.0
Marketplace	3.2.0
Wallet Identity	2.0.0
Restricted Token	0.1.0