The idea behind this feature is to allow you to quickly and easily transform your existing palettes created with Bricks into reusable CSS variables and leverage all the corresponding benefits of dynamic data applied to CSS values.

Where can I find it inside the builder?

The converter is visible inside the Class Manager when hovering a static color created using the Vanilla Bricks Palette. You can easily recognize the static colors inside the Color Manager: they are slightly grayed compared to the other ones, and contain a unique icon when hovered:

Here is how it looks inside the native color popup:

How does it work?

When you click on the converter icon, the following steps are automated:

• a CSS variable is created based on the Color Name and AT will take care of enqueuing it on frontend
• The actual HEX/RGB/HSL value is assigned to the variable
• The static value is removed from the color object

Once the color has been converted, you get access to all the advanced features provided by the Color Manager:

… here is how it looks now in the native color popup:

Note that the color is exactly the same, but now you’re using a dynamic value and you can easily manage it inside the Color Manager.

Let’s review all the functionalities that can help create and manage your color palettes more efficently.

Create a new color palette

To create a new color palette, hover on the header of the Color Manager, and click on the “plus” icon:

The select dropdown will change to an input field where you can type the name of the of the new color palette:

Once you typed your desired color palette’s name, hit ENTER and the color palette will be created and selected.

Switching color palette

Switching between your color palettes inside the Color Manager is super easy: just click on the select input field inside the header of the Color Manager and click on the color palette you want to edit:

Duplicate a color palette

Duplicating an entire color palette is a 100% manual process in vanilla Bricks, but with the Color Manager it’s just a single clicks away. Hover on the header of the Color Manager and click on the “duplicate” icon:

The entire color palette is now duplicated. Note that the duplicated palette has a “(Copy)” string added to the name – feel free to rename it as per your needs:

Note: if you duplicate a color palette that contains dynamic colors (with CSS variables), the variables are now conflicting with each other. Make sure to rename the variable colors with a unique name to avoid any name collision.

Rename a color palette

To rename a color palette, just hover on the header of the Color Manager and click on the “pen” icon:

The select field will change to a text input field where you can edit the name of the current color palette:

Once done, just hit ENTER to apply the new name.

Renaming a color palette has no impact on the elements and the corresponding assigned colors.

Delete a color palette

Deleting a color palette is a 2-steps action inside the Color Manager. First, hover on the header of the Color Manager and click on the “bin” icon:

You will be requested to confirm your choice by clicking on the “check” icon that will appear.

After 2 seconds, if the action hasn’t been confirmed, the “bin” icon will show up again and restart the sequence.

Note: if you delete a color palette that contains dynamic colors, the corresponding CSS variables will be removed on the frontend and all the elements that have these variables applied will need to have new colors reassigned.

Set a color palette as the default one

Setting a default color palette will both reflect on the Color Manager and in the native color popup. Just hover on the header of the Color Manager and click on the “star” icon.

The effect of the default color palette is slightly different for the Color Manager compared to the native color popup: the default color palette will be opened by default when you open the Color Manager for the first time, but as soon as you switch color palette during your builder session and reopen the Color Manager, the last opened palette will be selected (instead of resetting the default palette each time as it happens with the native color popup).

Create a new color

On the bottom of the Color Manager, you’ll see a text input field where you can add the name of your new color to add to the palette:

Just type a unique color name inside the field and hit ENTER.

Note: by default, the light color assigned to a newly added variable is #FFFFFF and the dark color is #000000. If you’re using a global prefix, don’t add it to the CSS variable name – it will be automatically included.

Rename a color variable

To rename a variable, just hover on the color and click on the “pen” icon:

The input field will be now editable:

Press Enter to confirm the name change.

Note: be aware that changing a variable name could lead to unpredicted results – ideally this should be avoided if the color has already been set on elements. While the color will be correctly updated inside the color palette, right now Bricks doesn’t update the RAW value on the corresponding elements that contains the color. 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

Duplicate a color

To duplicate an existing variable, hover on the color and click on the “duplicate” icon:

The duplicated color will have a “(Copy)” string at the end of the name:

NOTE: Make sure to rename the color to a unique name to avoid naming collisions with other CSS variables.

Delete a color

Deleting a color is a 2-steps action inside the Color Manager. First, click on the “bin” icon:

Secondly, click on the “check” icon to confirm your choice.

Once the color has been deleted, the corresponding variable won’t be enqueued on the frontend anymore.

Note: if you delete a dynamic color, all the elements that have the variable applied will need to have a new color reassigned – the color won’t be removed from the element automatically!

Filter your colors by name

If you happen to have a lot of colors inside your palette, it may be handy to quickly filter them. To filter the colors by name, just type a matching keyword in the dedicated field:

To reset the filter, either click on the “cross” icon on the right or delete the keyword inside the text input field.

Filtering the colors inside the Color Manager has no impact on your colors, elements, or the frontend.

Copy your color variable to the clipboard

Sometimes you want to quickly copy the CSS variable name, so you can easily paste the var() function inside your style controls. To do that, hover on the color and click on the “clipboard” icon:

Reorder your colors

The Color Manager supports reordering single and multiple items inside the color palette. For single reordering, just drag the “handle” icon next to the color button and drop the color on the target position.

For multiple reordering, click on the “handle” icon of all the colors you want to reorder – the selected colors will be highlighted. To reorder the entire group, just drag any of the selected “handle” icon – the script will group all the selected colors and expand them again when you drop the group on the target position.

Active Color on page

The Color Manager includes a nifty indicator that lets you know if a color is applied on the current page. If the color is active, a small icon on top of the color button will be displayed :

The script will scan for your active colors in the following areas:

• The elements of the current post
• The active global classes that have been added to the elements of the page
• The active Theme Styles

Looks familiar? Typically, if you frequently tweak the developer settings on Chrome, chances are you’ve come across this same color picker. It offers easy navigation between HEX, RGB, and HSL formats. Not only that, but you can also set custom values for hue, saturation, lightness, and alpha via a convenient drag-and-drop interface.

The initial color palette manager didn’t have the capability to support colors with alpha channels. That’s a thing of the past — now, you can assign any transparency value to any color present in your palette and it will indeed be accurately represented within the generated CSS variable.

With a simple click, Advanced Themer can create various color shades for you. You can create up to 20 variations at a time for transparent/light/dark shades! It’s pretty much limitless!

The scale generator is engineered to handle multi-level color schemes, helping you craft complex color gradients with ease. Making intricate color scales won’t be a problem anymore.

Implementing dark mode might seem challenging since it usually needs custom JS and CSS to function smoothly. But don’t worry! Thanks to Advanced Themer, creating a dark mode variant of your color shades is now a breeze. Just a few clicks, and you’re good to go!

If you need to refine each color shade in both light and dark mode after using our time-saving shade generator – that’s perfectly OK! You have full control over every color that is generated by our color manager. Indeed, it’s completely customizable whenever you need it.

Do you stick with ACSS colors, yet find yourself longing for an effortless route to design a darkmode version of your website? We’ve got you covered! And it won’t mess with your ACSS settings!

Column properties (“fake” masonry layouts…), advanced transform settings, white-space, backdrop-filter, background-clip, break, perspective, etc… are just some of the new CSS controls that you can now activate inside the builder.

Got a load of nested elements to deal with? It can definitely feel overwhelming sorting through several parent elements in the structure panel, just to access the one you need to tweak. Now, there’s no pressure. Using this feature, you can swiftly unfold all the elements within a container.