Layer Style Condition
As the name suggests layer style conditions apply to layer styles and can be used to control a layout and/or its behavior depending on different factors like device type or system settings (e.g. darkmode).
Layer style condition files
Layer style condition files are located in the ./layer_style_condition directory of the app configuration.
Each layer style condition file must have the following data structure, where name should be the same as the file name, while content has to be an object that contains a condition itself.
Layer style conditions are interrelated and have to be used in combination with layer styles. In order to apply a layer style condition to a layer style, the name of the layer style condition must be specified in the name of the layer style.
For example, the layer style condition with the "name": "darkMode" can be applied to a layer style by specifying its name within the layer styles name like this "name": "text(darkMode)".
If the layer style condition is not met and there is no layer style fallback, no layer style will be applied.
Example layer style condition based on the operating system of the device
Layer style condition that identifies an Android device:
{
"name": "isAndroid",
"content": {
"left": {
"context": "device",
"field": "os"
},
"mode": "equals",
"right": {
"value": "android"
}
}
}
Layer style condition that identifies an iOS device:
{
"name": "isiOS",
"content": {
"left": {
"context": "device",
"field": "os"
},
"mode": "equals",
"right": {
"value": "iOS"
}
}
}
Example layer style condition for using dark/light color themes
Layer style condition that distinguishes which color theme the device is using:
{
"name": "darkMode",
"content": {
"left": {
"context": "device",
"field": "darkModeEnabled"
},
"mode": "equals",
"right": "true"
}
}
Screenshot of the layer style condition file structure.
Layer style backgroundColor.json configuration (Will be used if device is using light mode):
{
"name": ".backgroundColor",
"content": {
"value": "#FFFFFF"
}
}
Screenshot of the layer style file structure.
Layer style backgroundColor(darkMode).json configuration (Will be used if device is using dark mode):
{
"name": ".backgroundColor(darkMode)",
"content": {
"value": "#333333"
}
}
Screenshot of the layer style file structure.
Layout configuration for the background color layer:
{
"type": "color",
"name": "backgroundColor",
"classes": [
"backgroundColor"
],
"constraints": [
{
"type": "pos",
"x": "0pt",
"y": "0pt",
"anchor": "nw",
"relativeAnchor": "nw"
},
{
"type": "size",
"height": "100%",
"width": "100%"
}
]
}
Screenshot of the view when the device is in light and dark mode respectively.