Creating a custom palette in a theme

Last updated on
22 January 2020

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

Page status: No known problems

You can: