Creating a custom palette in a theme
If you're developing a theme, sometimes you don't want to give the users too much freedom to set any color they want on the content of a page. This could break your theme style consistency.
Gutenberg module allows developers to create their own color palette to be used on the editor.
On your theme folder you just need to add a file named your_theme.gutenberg.yml and follow this structure:
theme-support:
colors:
- slug: "black"
name: "Black"
color: "#000000"
- slug: "white"
name: "White"
color: "#FFFFFF"
- slug: "dark-midnight-blue"
name: "Dark Midnight Blue"
color: "#003366"
- slug: "very-dark-orange"
name: "Very Dark Orange"
color: "#663300"
Automatically, the editor will retrieve the color palette definition from the yaml configuration file.
Then you must define two classes for each color on your theme css. One for foreground color and another for background color. For example:
.has-black-color { color: #000000; }
.has-white-color { color: #FFFFFF }
.has-dark-midnight-blue-color { color: #003366; }
.has-very-dark-orange-color { color: #663300; }
.has-black-background-color { background-color: #000000; }
.has-white-background-color { background-color: #FFFFFF }
.has-dark-midnight-blue-background-color { background-color: #003366 }
.has-very-dark-orange-background-color { background-color: #663300 }
And that's it! Now you have control of your site colors and users don't have to guess which color to use. ;)
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion