> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/digital-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/digital-user-documentation/custom-settings/colors.md).

# Colors

## Alternative color

**Digital** allows to add **alternative color. Alternate color** set **background-color** for input, textarea, submenu, subscribe banner, tags, tier card, post content cards, post header, etc.

## To customize:

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click <mark style="color:green;">**Open**</mark>
3. In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

   ```html
   <style>
       :root {
           --alternate-color: #000;
       }
   </style>
   ```

   <figure><img src="/files/i7iMWL3WqvbU7awh7ura" alt=""><figcaption></figcaption></figure>
4. Click <mark style="color:green;">**Save**</mark>

{% hint style="info" %}
If the variable `--alternate-color` is not defined, the default color is `#f5f5f5`
{% endhint %}

## Background Color

**Digital** supports customizing **Background Color** of the website.

## To customize:

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click <mark style="color:green;">**Open**</mark>
3. In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

   ```html
   <style>
       :root {
           --main-background-color: #000;
       }
   </style>
   ```

   <figure><img src="/files/1STMcKOyfduonQV9Rnps" alt=""><figcaption></figcaption></figure>
4. Click <mark style="color:green;">**Save**</mark>

{% hint style="info" %}
If the variable `--main-background-color` is not defined, the default color is`#ffffff`
{% endhint %}

## Colors in dark mode

**Digital** allows to change **Alternative color**, **Background Color**, **Accent Color** in dark mode.

## To customize:

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click <mark style="color:green;">**Open**</mark>
3. In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

   ```html
   <style>
       :root {
           --main-color--dark-mode: #FFFFFF;
           --alternate-color--dark-mode: #483C6C;
           --main-background-color--dark-mode: #261651;  
       }
   </style>
   ```

   <figure><img src="/files/UAjaT5C496UVFPoBuEqe" alt=""><figcaption></figcaption></figure>
4. Click <mark style="color:green;">**Save**</mark>

{% hint style="info" %}
If the variable `--main-color--dark-mode` is not defined, the default color is`#f5f5f5`

If the variable `--alternate-color--dark-mode` is not defined, the default color is`#3d3d3d`

If the variable `--main-background-color--dark-mode` is not defined, the default color is`#1d1d1f`
{% endhint %}