1{
2  "template": {
3    "type": "div",
4    "attr": {
5      "value": "mediaQuery_test"
6    }
7  },
8  "styles": {
9    "@MEDIA": [
10      {
11        "condition": "(dark-mode:true)",
12        ".header": {
13          "width": "100%",
14          "height": "60px",
15          "fontSize": "16px",
16          "alignItems": "center",
17          "justifyContent": "center"
18        },
19        ".footer": {
20          "width": "100%",
21          "height": "40px",
22          "alignItems": "center"
23        }
24      },
25      {
26        "condition": "(dark-mode:true)",
27        ".title": {
28          "fontSize": "16px",
29          "color": "#333333",
30          "alignItems": "center"
31        },
32        ".container": {
33          "width": "500px",
34          "height": "500px",
35          "backgroundColor": "#fa8072"
36        },
37        ".button": {
38          "paddingTop": "50px",
39          "fontSize": "16px",
40          "color": "#666666",
41          "alignItems": "center",
42          "justifyContent": "center"
43        }
44      }
45    ]
46  },
47  "actions": {},
48  "data": {}
49}