# 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="https://570087162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwvffoSogkWPRht0dQCRD%2Fuploads%2Fv0ZsFdGJEpWAmRYue9HX%2Falt-color.JPG?alt=media&#x26;token=91b547c2-0299-4349-be21-68ff267192ea" 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="https://570087162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwvffoSogkWPRht0dQCRD%2Fuploads%2F3LMahDdzsYmm6eWljmwP%2Fbg-color.PNG?alt=media&#x26;token=ef053547-a93e-4082-8b6f-c49415d4f939" 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="https://570087162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwvffoSogkWPRht0dQCRD%2Fuploads%2Fl73e3VbvVelD4mtBAJQn%2Fdark-mode-colors.JPG?alt=media&#x26;token=f01b0a49-6b7e-451a-ac14-946c18b4b052" 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 %}