Docs

Site Color Scheme

  • Updated:

In Total 5.4 we added the ability to quickly change the default color scheme of the theme so you can instantly change the default design of the site globally. To access the settings simply go to Appearance > Customize > Global Styles > Color Scheme.

How Does The Color Scheme Work?

The Total theme is coded using 4 text colors and 4 surface colors which are used throughout the site. These colors can be located in the :root CSS property declarations as follows:

:root {
    --wpex-text-1: var(--wpex-gray-900);
    --wpex-text-2: var(--wpex-gray-700);
    --wpex-text-3: var(--wpex-gray-600);
    --wpex-text-4: var(--wpex-gray-500);
    --wpex-surface-1: var(--wpex-white);
    --wpex-surface-2: var(--wpex-gray-100);
    --wpex-surface-3: var(--wpex-gray-200);
    --wpex-surface-4: var(--wpex-gray-300);
    --wpex-alert-bg: var(--wpex-surface-3);
}
You may notice the surface and text colors make use of the themes grayscale (see theme's style guide) for their default values.

So when you adjust the Customizer options the theme will simply override these default custom CSS properties (variables).

Using Color Scheme Colors in Elements or Custom Code

If you wish to use the text and surface colors in your custom code or elements you can!

For example if you wanted to apply custom CSS to an element to give it a Surface 2 background you can like this:

.my-element { background: var(--wpex-surface-2); }

You can also make use of theme utility classes in your HTML (or element custom class field when using a page builder). Example:

<div class="my-element wpex-surface-2">element content</div>

And as you may have guessed, the classnames available are the following:

wpex-text-1
wpex-text-2
wpex-text-3
wpex-text-4

wpex-surface-1
wpex-surface-2
wpex-surface-3
wpex-surface-4
Back To Top