Global Style Variations
What Are Style Variations?
Style variations let users switch between different visual styles (color schemes, typography, spacing) without changing the theme.
Creating Style Variations
Place JSON files in the styles/ directory:
my-theme/
โโโ styles/
โ โโโ blue.json
โ โโโ earth.json
โ โโโ minimal.json
โโโ theme.jsonBasic Style Variation
styles/blue.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Blue",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#0077cc"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#005fa3"
},
{
"name": "Accent",
"slug": "accent",
"color": "#00a8e8"
},
{
"name": "Dark",
"slug": "dark",
"color": "#003366"
},
{
"name": "Light",
"slug": "light",
"color": "#e6f3ff"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#003366"
}
}
}styles/earth.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Earth Tones",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#8b4513"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#6b8e23"
},
{
"name": "Accent",
"slug": "accent",
"color": "#daa520"
},
{
"name": "Dark",
"slug": "dark",
"color": "#3c2415"
},
{
"name": "Light",
"slug": "light",
"color": "#faf0e6"
}
]
}
},
"styles": {
"color": {
"background": "#faf0e6",
"text": "#3c2415"
}
}
}styles/minimal.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Minimal",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#000000"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#333333"
},
{
"name": "Accent",
"slug": "accent",
"color": "#666666"
},
{
"name": "Dark",
"slug": "dark",
"color": "#000000"
},
{
"name": "Light",
"slug": "light",
"color": "#f5f5f5"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff",
"text": "#000000"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--system)"
}
}
}Dark Mode Variation
styles/dark.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Dark Mode",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#60a5fa"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#a78bfa"
},
{
"name": "Accent",
"slug": "accent",
"color": "#34d399"
},
{
"name": "Dark",
"slug": "dark",
"color": "#f8fafc"
},
{
"name": "Light",
"slug": "light",
"color": "#1e293b"
}
]
}
},
"styles": {
"color": {
"background": "#0f172a",
"text": "#e2e8f0"
},
"elements": {
"link": {
"color": {
"text": "#60a5fa"
},
":hover": {
"color": {
"text": "#93c5fd"
}
}
},
"button": {
"color": {
"background": "#60a5fa",
"text": "#0f172a"
}
}
}
}
}Typography Variations
styles/serif.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Classic Serif",
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Serif",
"slug": "heading",
"fontFamily": "Georgia, 'Times New Roman', serif"
},
{
"name": "System",
"slug": "body",
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif"
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--body)"
},
"elements": {
"h1": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--heading)"
}
},
"h2": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--heading)"
}
},
"h3": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--heading)"
}
}
}
}
}Combining Color and Typography
styles/modern.json
{
"$schema": "https://schemas.wp.org/wp/6.5/theme.json",
"version": 3,
"title": "Modern Tech",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#6366f1"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ec4899"
}
],
"gradients": [
{
"name": "Primary Gradient",
"slug": "primary-gradient",
"gradient": "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)"
}
]
},
"typography": {
"fontFamilies": [
{
"name": "Inter",
"slug": "primary",
"fontFamily": "'Inter', sans-serif"
}
]
}
},
"styles": {
"color": {
"background": "#faf5ff",
"text": "#1e1b4b"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--primary)"
}
}
}How Users Switch Styles
Users can switch style variations in the Site Editor:
- Open Site Editor
- Click the Styles icon (half-filled circle)
- Click "Browse styles"
- Select a variation
Pro Tip: Include a screenshot for each variation. Name it the same as the JSON file (e.g.,
styles/dark.png) for automatic preview display.
Next Steps
In the next lesson, we'll add dynamic functionality with PHP.
๐ฏ Lesson Complete! You can now create flexible style variations for your block theme.
