Color Palette Setup in Gutenberg

For more information, see Gutenberg color palette and button styling.

Gutenberg allows you to define a custom color palette for your theme. There are two aspects to setting it up:

  1. Register the color palette options in functions.php
  2. Add css for each color option in your stylesheet

The styles for a “grey” color option (#555) would be:

.has-grey-color { color: #555; } .has-grey-background-color { background-color: #555; }

We can use SASS partials to auto-generate this using an array of color options. This is how I implement it in my two base themes (EA Genesis Child and EA Starter).

_colors.scss

// Gutenberg color options // -- see editor-color-palette in functions.php $colors: ( blue, #59BACC ), ( green, #58AD69 ), ( orange, #FFBC49 ), ( red, #E2574C ); /* Color Options --------------------------------------------- */ @each $name, $color in $colors { .has-#{$name}-color { color: $color; } .has-#{$name}-background-color { background-color: $color; } }

functions.php

/** * Theme Setup * */ function ea_setup() { // Disable Custom Colors add_theme_support( 'disable-custom-colors' ); // Editor Color Palette add_theme_support( 'editor-color-palette', array( array( 'name' => __( 'Blue', 'ea-starter' ), 'slug' => 'blue', 'color' => '#59BACC', ), array( 'name' => __( 'Green', 'ea-starter' ), 'slug' => 'green', 'color' => '#58AD69', ), array( 'name' => __( 'Orange', 'ea-starter' ), 'slug' => 'orange', 'color' => '#FFBC49', ), array( 'name' => __( 'Red', 'ea-starter' ), 'slug' => 'red', 'color' => '#E2574C', ), ) ); } add_action( 'after_setup_theme', 'ea_setup' );

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk