Custom Color Palette
- Color picker palette overview
- Choosing the default colors in the color picker
- Disabling the color history
- Disabling the template's base colors
Color picker palette overview
- 3 colors from the body (message background, content background, link) + black (#000000)
- custom colors (as many as customers want)
- 7 most recently used colors
Use the options outlined below to customize the default color palette.
Choosing the default colors in the color picker
The builder allows you to configure a custom color palette (per user), by modifying the client-side configuration. This, for instance, allows you to provide users with easy access to their company’s brand colors.
If no color profile is provided, then the builder will continue to suggest a color palette based on the colors used in the template that is being loaded.
var beeConfig = {
uid: config.uid,
defaultColors: ['#ffffff', '#000000', '#95d24f', '#ff00dd'],
...
Disabling the color history
The builder will remember recently selected colors and add them to your color palette. If the browser’s privacy settings allow it, the color picker history will be saved in the browser’s local storage.
If you want the color palette to be static such that recently selected colors are not included, then you can disable the history in your configuration.
var beeConfig = {
uid: config.uid,
disableColorHistory: true,
...
Disabling the template's base colors
The builder by default adds colors found in the template’s body section to the color palette.
If you want the color palette to only show the colors you pass in via the bee config document, then you must disable the base colors.
var beeConfig = {
uid: config.uid,
disableBaseColors: true,
...