How to Use Color Schemes

Stackable’s Global Color Schemes allows you to easily customize the colors of the blocks used on your website. Global Color Schemes can be found in the Stackable Design System panel.

Selecting a Color Scheme

Users can choose two color schemes. By default, Stackable applies the default color scheme to all blocks. Users can change this by selecting a different color scheme from the options available.

They can choose from 50 preset color schemes.

Color schemes can be further adjusted to fit their design requirements, or they can create a custom color scheme from scratch.

Customizing Colors

Users have the ability to set specific colors for the following elements:

Background Color (Note: Not used for the Base Color Scheme)
Heading Color
Text Color
Link Color
Accent Color
Button Color
Button Text Color
Button Outline Color

To edit the selected color for a specific element:

Click the color picker for the element that you want to change the color of.
Use a HEX code or simply use the color sliders to pick a new color.
And you're done! This should automatically update the color of the selected element.

Creating a Custom Color Scheme

To create a new color scheme:

Navigate to the Color Scheme panel.
Click on the + button to add a new color scheme.
Customize the colors as needed.

Assigning Color Schemes

Once a color scheme has been selected, users must assign it to different modes:

Base Color Scheme – Defines the default colors for text, accents, and buttons when no special options are enabled.
Background Mode Color Scheme – Applies colors when the background option is enabled for a block.
Container Mode Color Scheme – Applies colors when the container option is enabled for a block.

Automatic Inheritance

After setting up the color schemes, all Stackable blocks will automatically inherit the selected colors, ensuring a consistent design across the website.

By leveraging color schemes, users can maintain a cohesive visual identity while streamlining the styling process.