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.
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
main.less file, those variables are used to style HTML elements. For example, the
body element is styled using the
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.
If you’re not in the Code Editor, from the Theme tab, click Edit HTML/CSS.
- Under the
STYLESdirectory, open the
- Change the
@accent_colorvariable definition to be
- Change the
@text_colorvariable to be
variables_dark.lessfile and make the same edits.
- Click Save.
- 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.
variables_dark.lessfile and replace the value for the
Click Save and note that the color is now lighter.
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.