How to use Avada Color Palette Schemes
Last Update: September 22, 2026
Avada’s color scheme system lets you define multiple named color palettes for your site — for example a Light palette and a Dark palette — and switch between them automatically, based on a visitor’s device setting, or manually with a button they click. You can also assign a specific palette to an individual Container so that one section of a page always uses different colors than the rest of the site.
Setting up your color palettes
Go to Avada → Options → Colors.
- Main Color Palette — your site’s core set of 8 colors. These are the colors used everywhere by default, and the ones your other global options and element settings reference. For best results, order them from lightest to darkest.
- Additional Color Palettes — add extra named palettes here (for example, a palette named “Dark Mode”). Each additional palette mirrors the Main Color Palette’s structure — give it a Palette Name and set its own set of colors. You can add as many additional palettes as you like.
Every palette — the main one and any additional ones — automatically generates a set of lighter/darker tint and transparency variations of each color, so gradients, hover states, and subtle background tints stay consistent no matter which palette is active.
Switching between Light and Dark mode
Once you have at least one additional palette, three more options appear on the Colors tab.
Default Color Mode controls which palette mode the site uses by default:
| Option | Behavior |
|---|---|
| Main | Uses only the Main Color Palette. No switching. |
| Light | Sets the site to Light mode’s palette for all visitors. |
| Dark | Sets the site to Dark mode’s palette for all visitors. |
| Auto (OS) | Follows the visitor’s own operating system/browser preference, based on the palettes chosen below. |
Two more fields decide which palette backs each mode:
- Light Mode Palette — which palette (Main Palette, or one of your additional named palettes) is used when Light mode is active.
- Dark Mode Palette — which palette is used when Dark mode is active.
If you want visitors to be able to switch modes themselves (rather than it being fixed or tied only to their OS setting), add a Button element anywhere on your page and connect its Link field to the Color Mode Toggle dynamic data option. Clicking that button flips the visitor between Light and Dark mode, and their choice is remembered on future visits to your site — even if you’ve set Default Color Mode to Auto or to a fixed mode.
Assigning a color scheme to a specific Container
You can override the active palette for just one section of a page, regardless of the site-wide mode setting. This is useful for something like a dark call-to-action band on an otherwise light page.
- Select the Container (row) you want to change, and open its settings.
- Go to the Design tab.
- Set Color Palette to the palette you want that Container to use — choose Main Palette, or any of your named additional palettes (for example “Dark Mode”). Leave it on Global Colors (Default) to keep following the site-wide mode.
This overrides the palette for elements inside that Container only. Some elements may need their individual color settings explicitly set to a global color (rather than a fixed custom color) for them to pick up the Container’s palette correctly.
