Month: April 2022

  • Custom Colors, Gradients, Duotone Filters

    When it comes to website design, color is one of the most critical factors. Colors set the tone of a website and influence the overall perception of a website. Therefore, when creating an effective website design, it’s essential to use colors that reflect your brand and support your message.

    WordPress provides new methods inside theme.json for setting custom color elements: palette, gradient, and duotone filters. Enabling/disabling core color options can be set to true/false in the following:

    "settings": {
    	"color": {
    		"custom": true,
    		"customDuotone": true,
    		"customGradient": true,
    		"defaultGradients": true,
    		"defaultPalette": true,
    	}
    }

    Color Palette

    The Frost WordPress theme sets six custom colors: Black, Primary, Secondary, Tertiary, White, Gray. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"palette": [
    			{
    				"name": "Black",
    				"slug": "black",
    				"color": "#000"
    			},
    			{
    				"name": "Primary",
    				"slug": "primary",
    				"color": "#990099"
    			},
    			{
    				"name": "Secondary",
    				"slug": "secondary",
    				"color": "#0099ff"
    			},
    			{
    				"name": "Tertiary",
    				"slug": "tertiary",
    				"color": "#00cccc"
    			},
    			{
    				"name": "Gray",
    				"slug": "gray",
    				"color": "#eee"
    			},
    			{
    				"name": "White",
    				"slug": "white",
    				"color": "#fff"
    			}
    		]
    	}
    }

    Gradients

    The Frost WordPress theme sets three custom gradients: Black to Primary, Black to Secondary, Black to Tertiary. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"gradients": [
    			{
    				"name": "Black to Primary",
    				"slug": "black-primary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--primary) 100%)"
    			},
    			{
    				"name": "Black to Secondary",
    				"slug": "black-secondary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--secondary) 100%)"
    			},
    			{
    				"name": "Black to Tertiary",
    				"slug": "black-tertiary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--tertiary) 100%)"
    			}
    		]
    	}
    }

    Duotone Filters

    The Frost WordPress theme sets three duotone filers: Black and Primary, Black and Secondary, Black and Tertiary. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"duotone": [
    			{
    				"name": "Black and Primary",
    				"slug": "black-and-primary",
    				"colors": [ "#000", "#990099" ]
    			},
    			{
    				"name": "Black and Secondary",
    				"slug": "black-and-secondary",
    				"colors": [ "#000", "#0099ff" ]
    			},
    			{
    				"name": "Black and Tertiary",
    				"slug": "black-and-tertiary",
    					"colors": [ "#000", "#00cccc" ]
    			}
    		]
    	}
    }