Since 2.0, Advanced Themer allows you to easily create and manage your dynamic colors inside the builder. You just have to enable the Color Manager and start creating your global colors from there – the script will automatically create the required CSS variables for you and enqueue them on the frontend without writing one line of code.
Configuration
Once you correctly activated the Global Colors in the theme settings, you’ll see a new “Global Colors” tab on top of the screen. Click on it to access to the related settings:
There are two options that you really want to set before starting creating your palettes with the Color Manager:
- ADD A PREFIX TO YOUR CSS VARIABLES: this can be really handy to avoid naming conflicts with other CSS variables on your website. The prefix will be added at the beginning of the variable’s name, and won’t be displayed inside the Color Manager – it’s a “set and forget” kind of security layer.
- ENABLE DARK MODE ON FRONTEND: toggle on this option if you want to enqueue the dark variation of your colors on the frontend. Keeping this option disabled won’t have any effect on your “light mode” colors.
Note: at the moment of writing this documentation, Bricks 1.9 doesn’t automatically replace modified variable values on your elements. That means that if you decide to add or change the prefix of the color variables after you previously assigned the colors to your elements, you may have to reassign your colors manually to be correctly reflected on both the builder and the frontend. Please vote to solve this issue here: https://forum.bricksbuilder.io/t/changing-the-css-variable-of-a-global-color-doesnt-reflect-on-elements/15709
Where can I find it inside the builder?
Once you enabled the Global Colors inside the theme settings, you’ll see a new color palette icon inside the topbar of the builder:
Clicking on the icon will open the Color Manager on top of the Structure Panel:
This is the expected result once the colors are added to your palette.
Assigning a color to a variable
Assigning a color value to your variable is pretty straightforward: click on the colored button next to the variable name – the color picker will be revealed. Just drag both the hue selector and the lightness/saturation levels to define the matching value, or manually add it inside the dedicated inputs on the bottom of the color picker.
Clicking on the arrow icon next to the color inputs will switch the format. The available formats are HEX(A), RGB(A), HSL(A) – A stands for the Algha Channel (= transparency) and it’s supported by all the formats. The transparency can be changed by dragging the slide input below the hue selector. Once you’re all set, just click outside the color picker to close it. Congrats! Your color has been successfully assigned to the variable!
Keep in mind that – independently of the format you choose to set your color – the final color saved in the database will be translated to HSL.
The frontend output
Let’s now inspect the result on frontend:
As you can see, all the CSS variables have been correctly created (using the name assigned to each color), the prefix has been correctly added to each variable, and all the values assigned are using the HSL format.
Overriding color values on local scopes
Since we are using variables, we can assign any custom value to all our color variables on “local scopes” – which means the color will be overridden only on the target element (and his children), without affecting parent or sibling elements.
Let’s say we want our primary color to be red on a specific element. We will add the following CSS declarations inside the Custom CSS control:
In this example:
- %root% is targetting our current element
- we assign a new value red to our primary variable
- we apply to newly assigned variable to the background-color CSS property using the var() function
Assigning new values to a variable can be applied on specific breakpoints:
…or on a specific pseudo-element or state:
…or even on concatenated classes:
Long story short, the options are endless!
How to convert the old AT’s color palettes to the new Color Manager
Before 2.0, AT’s color system was based on a dedicated Color Palette CPT – which has been deprecated in favor of the new builder integration. The colors that were previously saved to your database will be converted as native Bricks color palettes as soon as you update AT to 2.0+.
Note: the conversion is automatic – you don’t have to do anything specific. However, keep in mind that if you added a prefix to your old color palettes, these will be imported inside each color name – and thus will be visible inside the Color Manager. If you want to manage the prefix globally from the theme settings, you’ll have to manually delete the existing prefix from the Color Manager, and then add the global prefix in the Theme Settings.
