Color and Gradient Palettes

To start colors should be defined for the theme in the variables.scss file.

Cover block with solid primary background

Cover block with custom gradient background

For example…

$color_primary: $color_blue;
$color_secondary: $color_green;
$color_tertiary: $color_orange;
$color_quaternary: $color_red;

Then in the template-colors.php file the hex color codes should be updated to reflect the colors the new variables generate. A page such a this is helpful.

<?php // Multidimensional array
global $theme_colors;
$theme_colors = array(
	"primary" => array(
		"slug" => "primary",
		"hex" => "#0368c8",
		"label" => "Primary"
	),
	"primary-light" => array(
		"slug" => "primary-light",
		"hex" => "#b3d2ef",
		"label" => "Primary Light"
	),
	"primary-dark" => array(
		"slug" => "primary-dark",
		"hex" => "#02498c",
		"label" => "Primary Dark"
	),
	"secondary" => array(
		"slug" => "secondary",
		"hex" => "#007765",
		"label" => "Secondary"
	),
	"secondary-light" => array(
		"slug" => "secondary-light",
		"hex" => "#b3d6d1",
		"label" => "Secondary light"
	),
	"secondary-dark" => array(
		"slug" => "secondary-dark",
		"hex" => "#005347",
		"label" => "Secondary Dark"
	),
	"tertiary" => array(
		"slug" => "tertiary",
		"hex" => "#d17800",
		"label" => "Tertiary"
	),
	"tertiary-light" => array(
		"slug" => "tertiary-light",
		"hex" => "#f1d7b3",
		"label" => "Tertiary Light"
	),
	"tertiary-dark" => array(
		"slug" => "tertiary-dark",
		"hex" => "#925400",
		"label" => "Tertiary Dark"
	),
	"quaternary" => array(
		"slug" => "quaternary",
		"hex" => "#b60539",
		"label" => "Quaternary"
	),
	"quaternary-light" => array(
		"slug" => "quaternary-light",
		"hex" => "#e9b4c4",
		"label" => "Quaternary Light"
	),
	"quaternary-dark" => array(
		"slug" => "quaternary-dark",
		"hex" => "#7f0428",
		"label" => "Quaternary Dark"
	),
	"white" => array(
		"slug" => "white",
		"hex" => "#ffffff",
		"label" => "white"
	),
	"gray-light" => array(
		"slug" => "gray-light",
		"hex" => "#d1d1d1",
		"label" => "Gray Light"
	),
	"gray" => array(
		"slug" => "gray",
		"hex" => "#676767",
		"label" => "Gray"
	),
	"gray-dark" => array(
		"slug" => "gray-dark",
		"hex" => "#484848",
		"label" => "Gray Dark"
	),
	"black" => array(
		"slug" => "black",
		"hex" => "#000000",
		"label" => "Black"
	)
);

All the options should now appear in the editors color picker options.

Gradients

Start by declaring the gradients that should appear as options in editor.

<?php function theme_custom_gradients()
{
    add_theme_support('editor-gradient-presets', array(
        array(
            'name' => __('Primary', 'gomo'),
            'gradient' => 'linear-gradient(135deg, rgba(91,169,214,1) 0%, rgba(27,106,175,1) 100%)',
            'slug' => 'primary'
        ),
		array(
            'name' => __('Secondary', 'gomo'),
            'gradient' => 'linear-gradient(135deg, rgba(91,169,214,0.5) 0%, rgba(91,169,214,0) 100%)',
            'slug' => 'secondary'
        ),
    ));
}
add_action('after_setup_theme', 'theme_custom_gradients');

All the options should now appear in the editors color picker options but the styles must still be added for each gradient in colors.scss file.

$gradients-list:(
	primary: linear-gradient(135deg, rgba(91,169,214,1) 0%, rgba(27,106,175,1) 100%),
	secondary: linear-gradient(135deg, rgba(91,169,214,0.5) 0%, rgba(91,169,214,0) 100%)
);
@each $key,$val in $gradients-list{
    :root {
    	.has-#{$key}-gradient-background {
    		background: #{$val};
    	}
    }
}

Color and Gradient Palettes

Gradients

Search the site

Share this page:

Generic pages

Address