> For the complete documentation index, see [llms.txt](https://docs.wfolio.pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wfolio.pro/site/en/design/color-schemes.md).

# Site colors

Go to the **Design → Site colors** to choose a color palette for your website.

<figure><img src="/files/Oiow1MgaWzmPlzxl8aIc" alt=""><figcaption></figcaption></figure>

Choose an accent color and a theme style.

<figure><img src="/files/zad94UjPjtLxph4S9DtG" alt=""><figcaption></figcaption></figure>

{% columns %}
{% column width="50%" %}
**Accent colors**

* black and white;
* beige;
* green;
* blue;
* red.
  {% endcolumn %}

{% column width="50%" %}
**Theme styles**

* light;
* universal;
* dark;
* contrast.
  {% endcolumn %}
  {% endcolumns %}

When you change the color of the website, the background color, the color of buttons, links and other elements on the site changes.

You can switch color accents for subheaders and buttons on or off.

<figure><img src="/files/2tcSnH7bukGLOFGPuCbj" alt=""><figcaption></figcaption></figure>

You can also turn on the [dark theme support](/site/en/design/dark-theme.md). If you choose the **Light** or **Universal** theme style, your website will be displayed with a dark color palette in browsers that have dark theme enabled.

<figure><img src="/files/rC2xZvnJPraTRwNqIPj7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
We have updated the site colors. You can go back to the old colors on the control panel: **Design → Site colors**.
{% endhint %}

#### Block background color

When you change the color of the website, the accent and contrast colors change, which can be used when setting up blocks on custom page. After choosing the color of the website, go to the page to change the color of the blocks.

{% hint style="info" %}
Block colors can only be set on custom pages.
{% endhint %}

Click the **palette icon** (block background). Select the block color:

* **Accent**. The accent color that you selected on the **Design** page.
* **Contrasting**. The color is the opposite of your color scheme.
* **Image.**

<figure><img src="/files/i0LUxiOqSsGuhiFWf8Mm" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The image as a background can be set on blocks with text, a button, and blocks with some widgets.
{% endhint %}