FSE Style Switcher
If you build block themes, this is super helpful for showcasing style variations. Throw your .json variations in your theme’s /styles directory and this plugin will produce a dropdown to invoke them on the current page. Demo above. This can easily be modified for persistent/global states if you need.
- .json files should be in your /wp-content/styles directory
- Shortcode: [style_switcher show_label="false"]
{
"title": "Earth – Clay",
"version": 2,
"settings": {
"color": {
"palette": [
{ "color": "#f5ebe0", "name": "Primary", "slug": "primary" },
{ "color": "#b25a3c", "name": "Secondary", "slug": "secondary" },
{ "color": "#5a3322", "name": "Tertiary", "slug": "tertiary" },
{ "color": "#ffffff", "name": "Base", "slug": "base" },
{ "color": "#9c4b2e", "name": "Links", "slug": "custom-links" },
{ "color": "#7b3922", "name": "Links Hover", "slug": "custom-links-hover" },
{ "color": "#3e2b21", "name": "Text", "slug": "text-primary" },
{ "color": "#d3b9aa", "name": "Footer", "slug": "footer" },
{ "color": "#00000075", "name": "Header Image overlay", "slug": "header-image-overlay" },
{ "color": "#ffffff50", "name": "Dark Transparency", "slug": "dark-transparency" },
{ "color": "#00000050", "name": "Light Transparency", "slug": "light-transparency" },
{ "color": "#f5ebe0", "name": "Background", "slug": "background-primary" }
]
}
},
"styles": {
"color": { "text": "var(–wp–preset–color–text-primary)", "background": "var(–wp–preset–color–background-primary)" },
"elements": {
"link": {
"color": { "text": "var(–wp–preset–color–custom-links)" },
":hover": { "color": { "text": "var(–wp–preset–color–custom-links-hover)" } }
},
"button": {
"color": { "background": "var(–wp–preset–color–custom-links)", "text": "var(–wp–preset–color–base)" },
":hover": { "color": { "background": "var(–wp–preset–color–secondary)", "text": "var(–wp–preset–color–base)" } }
}
}
}
}
