Colors
Manage your Colors with Ease
The color management in Bricks is pretty amazing, yet there's always space to get even better. That's where Advanced Themer comes in to give your color palettes a professional upgrade. With cool features like dynamic colors that perfectly mingle with your website, advanced color managing options, a one-click color shade generator, no-code dark mode, a one-click css color variable converter, this tool elevates theming to a whole new level. Plus, it comes with two extra & customizable elements: a button and a toggle for switching to darkmode on frontend.
Color Variables Picker
Easily apply your color variables to any builder control with the new Color Variable Picker. This tool showcases all your palettes in an organized layout, complete with each color's corresponding light/dark shades and tints. After trying this feature, you won't want to use the native color grid anymore!
2 New Elements: Nestable Darkmode Button & Toggle
Introducing the Nestable Dark Mode Button and Toggle, two new elements offering full control over inner elements for easy customization. They are fully accessible on the fly - with aria-label and focus styling, support logical properties, and include precompiled default styles within the builder controls.
Dynamic Colors
Say goodbye to inline colors! With our Advanced Themer, all your color management is handled through custom CSS variables. Imagine your client wants to revamp their website's color scheme entirely. Fear not! In just a few clicks, you can easily make the changes!
Convert Vanilla Bricks Colors into CSS variables
The colors created in Bricks aren't typically saved as CSS Variables; they're primarily static values. But, if you're keen on enjoying the convenience of CSS variables, guess what? You're simply a button tap from utilizing our color variable converter.
Global Color Manager
Your color palettes can get a little overcrowded with various roles for diverse tasks. The good news is that the color manager is all dressed up with new features to put order back into your color system. You can easily play around - adding, removing, duplicating, reordering (with drag-and-drop), or renaming any color and palette.
Advanced Color Pickr
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.
Alpha channel supported
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.
Color Shades generator
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!
Complementary Color Generator
Create complementary colors based on any color - following the color theory. Generate the (split) opposite/triad/tetrade/quadratic/compound colors, or an analogous color palette in one click.
Advanced Scale Generator
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.
Auto-darkmode
Automatically generate the dark version of your color. The script will calculate the opposite lightness of your light color, and assign it to your dark palette in one click.
No-code Darkmode
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!
Customize any shade and dark color variant
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.
Import colors from a CSS variable List
Would you like to import your CSS color variables inside the native Bricks color palettes and leverage the benefits of dynamic data? With Advanced Themer it's as easy as copy/pasting!
Set Custom Darkmode colors for ACSS variables
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!
Synced with Gutenberg Default Palette
You've set up your color palette in Bricks – nice job! Now, let's say you're looking to integrate a Gutenberg block into your design. No more tedious copy/pasting needed! With Advanced Themer, all your colors - including the vanilla Bricks colors - are seamlessly synced between Bricks and WordPress. Enjoy streamlined designs without any extra hassle!
New Element: Darkmode Button
This feature allows you to effortlessly add a lightmode/darkmode switch to your page. Do you typically go for a fixed position at one of the corners of your site? Or do you fancy incorporating it into your header or footer? No worries! Every combination is now achievable. Plus, you can tailor each design element to your taste – icons, colors, sizes, shapes, borders, and more!
Enable/Disable any Color Palette
Wish you could A/B test your colors by temporarily disabling an entire palette? That's a one-click action with Advanced Themer!
Meta Theme Color – Both globally and per page
Do you want to easily customize the display of the page or of the surrounding user interface? Now you can quickly do that for all the browsers that support the meta theme-color attribute. Set a global theme-color value that will apply to the whole site, and even customize it on a per-page basis inside the builder settings.
New Element: Darkmode Toggle
The dark mode toggle works just like the Dark Mode button switch. The key difference is one is a button and the other is a toggle – quite the observation! Seriously, this is all about your design preference. Give both a whirl and pick the one that suits you best!