# Customization & Styling

Marketplace widgets have simplistic dark and light mode styles. By default, it renders according to the end-user's preferred OS colour scheme. The widget can be easily stylized by changing the appropriate Manifold CSS Variables.

## Manifold CSS Variables

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

You can also customize Marketplace widgets using the Manifold CSS variables.

The full list of variables can be found [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/manifold-css-variables/list-of-manifold-css-variables).

## Marketplace-Specific CSS Variables

On top of the base Manifold CSS variables, Marketplace widgets offer a list of variables to simplify customization. These are located under the `.m-marketplace` scope.

### Floating Action Buttons (FAB)

* `--m-marketplace-fab--size--primary`: size of primary FABs. Defaults to 50px.
* `--m-marketplace-fab--size--secondary`: size of secondary FABs. Defaults to 40px.
* `--m-marketplace-fab--size--popup`: size of FABs located in popup overlays. Defaults to 2rem.
* `--m-marketplace-fab--color--text`: text colour for FABs.
* `--m-marketplace-fab--color--background`: background colour for FABs.
* `--m-marketplace-fab--color--hover`: background colour for FABs on hover.

### Loading Screens

* `--m-marketplace-loading--color--values`: comma-separated HSL value. Read by `--m-marketplace-loading--color--background` and `--m-marketplace-loading--color--overlay`.
* `--m-marketplace-loading--color--background`: colour for full-screen loading screens. By default, reads `--m-marketplace-loading--color--values` as an HSL value.
* `--m-marketplace-loading--color--overlay`: colour for loading overlays. By default, reads `--m-marketplace-loading--color--values` as an HSL value and sets the alpha channel to 0.5.

### Popups

* `--m-marketplace-popup--color--background`: colour to dim the elements behind the popup.
* `--m-marketplace-popup--color--button`: colour for buttons in a popup.
* `--m-marketplace-popup--color--button--hover`: background colour for popup buttons on hover.
* `--m-marketplace-popup--color--button--text`: text colour for popup buttons.

### Other

* `--m-marketplace-bid-overlay--padding`: padding value for the bid overlay screen. Defaults to 80px for screens wider than 525px and 30px for screens less than or equal to 525px in width.
* `--m-marketplace-overlay--color--border`: colour for the surrounding border on overlay screens (`m-layout-bid-overlay`).
* `--m-marketplace-input--color--background`: background colour for input fields.