🎨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:

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:

   Copy

   <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;
       }
   </style>

4. Click Save

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