# Manifold CSS Variables

{% hint style="info" %}
This section assumes you have basic HTML and CSS knowledge.
{% endhint %}

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:

```css
.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.

{% content-ref url="/pages/WXoWjiWN0T6kM2Y3giTM" %}
[List of Manifold CSS Variables](/manifold-for-developers/resources/widgets/manifold-css-variables/list-of-manifold-css-variables.md)
{% endcontent-ref %}

## 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](/manifold-for-developers/resources/widgets/connect-widget.md)                   | 2.1.0                                 |
| [Campaign](/manifold-for-developers/resources/widgets/campaign-widget.md)                 | 0.1.0                                 |
| [Marketplace](/manifold-for-developers/resources/widgets/marketplace-widgets.md)          | 3.2.0                                 |
| [Wallet Identity](/manifold-for-developers/resources/widgets/wallet-identity-widget.md)   | 2.0.0                                 |
| [Restricted Token](/manifold-for-developers/resources/widgets/restricted-token-widget.md) | 0.1.0                                 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.manifold.xyz/manifold-for-developers/resources/widgets/manifold-css-variables.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.