Settings
The settings collection allows you to use placeholders for common values used throughout the theme. By using placeholders for common values, you can alter a theme by tweaking these values in one place instead of having to modify all the styles or properties that are affected by the change.
.png?alt=media)
Define your placeholders using the editor tab in the "settings" section. Use either a string, an array, or a numeric value. The value you specify in that section will replace the placeholder that you use in the theme.
For example, "borderRadius": 3 will replace the "$borderRadius" placeolder in "radius": "$bolderRadius".
"[name]": [value]
The value can be a number, an array or a string.
"settings": {
"borderSize": 1,
"borderColor": ["red", "yellow", "green", "blue"],
"focusTransition", "background-color 150ms"
}
Use the settings in the theme by prefixing the name with "$" and always in a string.
"styles": {
"width": "$borderSize",
"color": "$borderColor"
}
Now you can change the settings in one place and the entire theme will get automatically updated!
Last modified 1yr ago