Changing theme colors – Video

Create color with React

Options panel color section

In Theme Options → Design → Colors, you can customize the theme colors. With React, all colors have been accounted for. In addition, React’s smart color building system calculates some colors for you, automatically generating different tones that will be applied to various elements, which means you get perfectly blending colors every time.

We have also added an advanced color picking tool. It will allow you to add colors with transparency using RGBA* and will save your already used colors so they can be selected again easily. This can be useful if you are modifying a color scheme.

* = RGBA doesn’t work for very old browsers – the solid color will be shown.

Color Schemes

Choose a Color Scheme

In → Colors → Choose a Color Scheme → View Color Global Schemes, you can apply a ready-made global color scheme to your theme. Expand this area, then click the color scheme of your choice to load the colors into the page. You must save the options for the change to take place.

Global colors schemes will change all the main areas of the page. However, if you are using Info Menu, Footer widget area or Pop Down widget area, you will need to create and apply a Color Palette (see below).

Choose a Color Scheme for areas

You can also load the ready-made theme color schemes for individual theme areas. Whenever you see the Choose a Color Scheme for this area, there are colors available for the area.

Customizing a scheme

Once you load a color scheme, you can go through each section and edit the colors to suit your brand or desired scheme.

Find and replace colors

If you have used a color palette or installed a Case Study then you may want to change specific colors to suit your design. Or you simply just want to make color changes without going through each one. The find and replace function makes it easy to replace colors in the Color section of the Options Panel including Palettes.

Simply paste or type in the color RGB(A) or HEX code you want to replace then inter the code to replace it with.

Color Palettes

In Theme Options → Design → Colors → Custom Color Palettes, you can create “Color Palettes”. These can be applied to multiple areas of the theme: the Pop Down widget area, the Content area, both the Footer sections, the Info Menu content area and the Section shortcode. This gives React a very unique color advantage over other themes.

Creating a Color Palette

In → Colors → Custom Color Palettes → Add a color palette, you can create your own Color Palette. The colors you create here can be applied to more than one section. Remember to give your Color Palette a name in the field provided.

Apply a Palette to an area of the theme

In Theme Options → Design → Colors, you can assign a Color Palette to the Pop Down, Content area (optional), Sub Footer (optional), Main Footer and (Main Header →) Info Menu.

Apply Palettes to the Section shortcode

When using the shortcode generator to add the Section shortcode, you will see an option to add a Color Palette. Here you can select a Color Palette you have created in the Options panel. By applying the Palette, all the content, shortcodes and widgets wrapped in this Section will be set to the colors in the Palette.