Add Color Variations
If you're creating color palettes for your theme, then you may also want to create light and dark variations of each palette. For example, the light version might use a white header and dark text, while a 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 that the site owner can choose from (unlike color palettes, the user can't select the colors to be used). For example, 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. Check out our resources for some sites that can help you with color decisions.
You configure your variations in the manifest file and then implement styles for each variation. You can use either LESS or CSS.
In this topic:
Configure Variation Styles 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 light and dark, respectively.
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 #fff and #000, respectively.
is dark
Set to true if this variation is dark and needs the site to automatically adjust fonts and other styling where needed. See Configure Themes for details. If you are creating light and dark versions for color palettes, then use false and true, respectively.
Here's what the manifest entries for a theme using variations for color palettes looks like:
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 light and dark, respectively.
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 #fff and #000, respectively.
is dark
Set to true if this variation is dark and needs the site to automatically adjust fonts and other styling where needed. See Configure Themes for details. If you are creating light and dark versions for color palettes, then use false and true, respectively.
Here's what the manifest entries for a theme using variations for color palettes looks like:
Light and Dark Color Variations
Here's what the manifest entries for a theme that has a light blue and dark blue variation might look:
Color Variations
Next, you need to create one default stylesheet for your site named main.less. This stylesheet contains all the styles for your theme, other than the color variations.
You then create a separate stylesheet 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:
For example, your default variables.less file might define these variables:
Define Color Variations in LESS
And the main.less stylesheet might use those values like this:
You then need to create a variation Less stylesheet, named variables_<variationName>.less, that holds the values for that color.
For example, the dark blue variation might have a file named variables_dkBlue.less that looks like this:
Code Editor
Note: The file loading order for LESS files is first variables.less, then 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.less file, 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.
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 the Variation Styles in CSS
Note: If your theme uses a color palette, then you must use LESS instead of CSS.
If your theme uses CSS, then your different 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 the following:
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 need to define the following:
- 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.
Define Color Variations in CSS
You can now refer to these in your stylesheet using a $, like this:
Code Editor
The correct color will be applied to the variable based on the color selected on the Theme Tab.