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};
    	}
    }
}

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited