About Color Variations
Color Variations allow you to create different versions of a theme, like a light version and a dark version. The light version might use a white header and dark text, while the dark version might use a black header and light text. For example, this theme has both a light and dark version that can be applied to the selected palette:
The light version uses a light navigation area, as shown above, while the dark version uses black instead:
Additionally, some Weebly themes have color variations. However, unlike color palettes, the user can’t choose custom colors. The theme shown below has four color options. In this example, the blue version is selected.
And in this one, the dark red version is selected.
As a theme designer, you can create these variations and determine which parts of a site will change when the color is changed.
You configure variations in the manifest file and then implement styles for each variation. You can use either LESS or CSS.
Create Color Variations in LESS
When using LESS, you configure the different color variations in the manifest file. The first one defined will be the one selected by default in the editor. Use the following properties in the manifest to define the color variation:
value: Name of the color. If you are creating light and dark versions for color palettes, then use
sample: The hex value that you want to display as the choice circle in the Theme tab. If you are creating light and dark versions for color palettes, then use
is dark: Set to
trueif this variation is dark and needs the site to automatically adjust fonts and other styling where needed. See Create the Theme Manifest for details. If you are creating light and dark versions for color palettes, then use
Here’s what the manifest entries for a theme using light and dark variations for color palettes looks like:
Here’s what the manifest entries for a theme that has a light blue and dark blue variation might look:
You then create a stylesheet separate from the
main.less file named
variables.less. This stylesheet holds the properties that change with each color variation. Each property is defined as a variable with a default style.
For example, your default
variables.less file might define these variables:
Next, you edit the
main.less file to use those values, like this:
You then need to create a variation stylesheet for each color variation. Named the file
variables_<variationName>.less, and add the values for that color.
For example, the dark blue variation might have a file named
variables_dkBlue.less that looks like this:
variables_<variationName>.less(which allows the color options to override the default), and lastly
main.less. Make sure you do not define values for any variables in your
main.lessfile, or they will overwrite values in the variable files.
Also, if all your variable color files are overwriting all the variables in
variables.less, then you don’t need to create
variables.less. Simply create a variables file for each color.
Create Color Variations in CSS
If your theme uses CSS, then your variations can live at the top of the
main_style.css file. Create commented-out JSON that contains the different values for CSS properties for each variation.
You need to define at least the following properties, along with any style properties you want to override:
value: The name of variable that will be used to identify this color. This needs to be unique.
sample: The hex value for the color variation’s main color. It is used for the circle in the Theme tab that the user clicks to select the variation.
You can use as many properties as you want, but each color variation must contain the same properties.
For example, the following example shows the color variations for a light variation and a dark variation.
You can now refer to these in your stylesheet using a $, like this:
The correct color will be applied to the variable based on the color selected on the Theme Tab.