Variations allow you to control certain color aspects of a theme. The Base theme has a light and a dark variation. The light variation uses a white background in the header and the dark variation uses black.

Light and dark variations of a theme

Each variation uses it’s own LESS file to define color variables that are then used in the main.less file. For example, the Base theme’s variation LESS files have variables for the background color (@bg_color), the text color (@text_color), and an accent color (@accent_color). Here’s what’s in the variables_light.less file:

@bg_color: #ffffff;
@text_color: #888888;
@accent_color: #555555;
@border_color: #e1e1e1;
@button_bg: #888888;
@button_hover: #cccccc;
@alt_button_bg: #333333;
@alt_button_hover: #555555;

In the main.less file, those variables are used to style HTML elements. For example, the body element is styled using the @bg_color variable:

body {
    width: 100%;
    background: @bg_color;
}

When a user selects a variation, the body element uses the background color defined for that variation. Because background color in the variables_light file is @bg_color: #ffffff;, when a user chooses that variation, the background color is white.

Let’s add the primary and accent color we just created to the variation files. Let’s have text use the primary color and let’s change the color currently defined for the accent color to use our palette’s accent color instead.

  1. If you’re not in the Code Editor, from the Theme tab, click Edit HTML/CSS.

  2. Under the STYLES directory, open the variables_light.less file. ​
  3. Change the @accent_color variable definition to be @site-accent-color.
    @bg_color: #ffffff;
    @text_color: #888888;
    @accent_color: @site-accent-color;
    @border_color: #e1e1e1;
    . . .
    
  1. Change the @text_color variable to be @site-primary-color.
    @bg_color: #ffffff;
    @text_color: @site-primary-color;
    @accent_color: @site-accent-color;
    @border_color: #e1e1e1;
    
Setting variations in styles
  1. Open variables_dark.less file and make the same edits. ​
  2. Click Save. ​ ​
  3. In the Theme tab, click on the Dark variation.

It’s really hard to see the dark purple text when using the dark variation, so let’s lighten it up. Instead of using a different color, let’s just lighten the variable by 50%. That way, if the user changes the primary color in the palette, the new color will still be used, but it will be light enough to see on a dark background.

  1. Open the variables_dark.less file and replace the value for the @text_color variable with lighten(@site-primary-color, 50%);.

  2. Click Save and note that the color is now lighter.

  3. Go ahead and create another palette as a user might, by clicking in the blank circle and using the dropdowns to create different primary and accent colors and notice how the theme changes.

What Just Happened?

You created a light and dark variation of the theme. The title and navigation links are now using the palette colors. Let’s see why. ​

Reopen the editor (click Edit HTML/CSS) and open the main.less file. This file holds the styles for the theme. Scroll down to the Text and type area and note that body text color is using the @text_color variable, so now it will use our primary color. And links are using the @accent_color variable, so they will now use the accent color from the palette.