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:
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.
Supported Widgets
The following table describes the widgets, along with their minimum required version, which support being styled by the Manifold CSS Variables.
Last updated