Inspired by the vibrant color palettes of Tailwind CSS, Powder offers 22 unique style variations, transcending conventional standards and providing a design canvas where creativity knows no bounds.
Each variation includes six colors, as defined in theme.json
below: Base, Contrast, Primary, Secondary, Tertiary, and Neutral.
Default Palette
{
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#0a0a0a",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#4c1d95",
"name": "Primary",
"slug": "primary"
},
{
"color": "#6d28d9",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#8b5cf6",
"name": "Tertiary",
"slug": "tertiary"
},
{
"color": "#f5f5f5",
"name": "Neutral",
"slug": "neutral"
}
]
}
}
}
This code yields a set of preset variables for the colors:
--wp--preset--color--base: #ffffff;
--wp--preset--color--contrast: #0a0a0a;
--wp--preset--color--primary: #4c1d95;
--wp--preset--color--secondary: #6d28d9;
--wp--preset--color--tertiary: #8b5cf6;
--wp--preset--color--neutral: #f5f5f5;
The default palette in the Powder theme mirrors Tailwind CSS’s Violet shades. Below is a screenshot of its appearance in the editor:
You can choose from 22 variations by going to Appearance > Editor > Styles and selecting your favorite color palette.