# Colors

**Principle** supports customizing different **Colors** of the website.

## Colors

You can change colors:

* Background Color
* Text Color
* Border Color and Hover
* Block Background Color (example: author card, page head block, blocks in post content)
* Color current page in navigation
* Color linear gradient (sets the color for the theme buttons)

#### To customize: <a href="#to-customize" id="to-customize"></a>

1. Access the **Settings** > **Code Injection** from the admin menu.
2. Click **Open**
3. In the provided space, specify the desired background-colors using the appropriate CSS variable. For example:

   <pre data-title="Copy"><code>&#x3C;style>
       :root {
           --main-background-color: #f6f6f6;
           --text-color: #0d0d0d;
           --border-color: #ede6e3;
           --border-color-hover: #dfcdc6;
           --block-background-color: #f8f6f5;
           --color-linear-gradient: linear-gradient(0deg, rgba(223, 60, 24, 1) 0%, rgba(255, 121, 91, 1) 100%);
           --color-current-nav-page:#f9f3f2;
       }
   &#x3C;/style>
   </code></pre>
4. Click **Save**

{% hint style="info" %}
If the variable  `--color-current-nav-page` is not defined, the default color is  `#f9f3f2`

If the variable  `--color-linear-gradient` is not defined, the default color is  `linear-gradient(0deg, rgba(223, 60, 24, 1) 0%, rgba(255, 121, 91, 1) 100%)`

If the variable  `--block-background-color` is not defined, the default color is  `#f8f6f5`

If the variable  `--border-color-hover` is not defined, the default color is `#dfcdc6`

If the variable  `--border-color` is not defined, the default color is `#ede6e3`

If the variable  `--text-color` is not defined, the default color is `#0d0d0d`

If the variable  `--main-background-color` is not defined, the default color is `#ffff`
{% endhint %}