Colors
Add or modify colors
If you want to modify or add a new color to your theme color palette, you can do so by adding it to your theme.json file.
By default, you'll have a primary, secondary, dark and light color.
1"color": {
2 "palette": [
3 {
4 "name": "Primary",
5 "slug": "primary",
6 "color": "#2C7FFF"
7 },
8 {
9 "name": "Secondary",
10 "slug": "secondary",
11 "color": "#FD9A00"
12 },
13 {
14 "name": "Dark",
15 "slug": "dark",
16 "color": "#18181C"
17 },
18 {
19 "name": "Light",
20 "slug": "light",
21 "color": "#F4F4F5"
22 },
23 {
24 "name": "Custom",
25 "slug": "custom",
26 "color": "#FF0000"
27 }
28 ]
29},
WordPress will generate and inject CSS variables, which we can pass on to Tailwind through the resources/css/theme.css file.
1--color-primary: var(--wp--preset--color--primary);
2--color-secondary: var(--wp--preset--color--secondary);
3--color-dark: var(--wp--preset--color--dark);
4--color-light: var(--wp--preset--color--light);
5--color-custom: var(--wp--preset--color--custom);