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
