The JSON file, theme.json, is used as the single styling source for all UI elements in your app. The following is an example of the basic format of this file:
[
// a list of resource names and values. Can contain any number of entries.
{
"resourceName" : "@type:resourceValue",
"secondResourceName" : "@type:secondResourceValue"
},
// a list of styles
{
"styleName" : {
"stylePropery" : "@type:stylePropertyValue",
"styleProperty:withTwoArgs" : ["@type:arg1", "@type:arg2"],
"layer.property" : "@type:stylePropertyValue"
}
}
]The two key elements of the theme file are an array. The resource list and style list are both arrays.
The Resource List
The resource list is simply a list of resource names and resource values. The resource name can be anything, but should begin with a lower-case character, and resource names containing more than one word should be in medial caps. Resource values take this format:
@type:value
Where @type: is a prefix stating the type of the value and value is a string whose format is specific to the type. A list of valid types and values is shown in the following table.
Type | Explanation | Example |
|---|---|---|
color | Defines a color as space-separated RGBA float values, in the range of 0 - 1. |
|
font | Creates a font using the font name and font size. The font name and size must be colon-separated values. |
|
unsigned int | Specifies an unsigned int value. In addition to setting normal integer values, a common pattern is to define an unsigned-int resource in the resource list and then reference that resource in multiple styles. This is particularly useful for enums, which only need to be defined once. |
|
image | Creates a |
|
float | Creates a float with the supplied value. |
|
nil | This can be used to set a value to nil. Any unrecognized |
|
colorref | Gets the |
|
edge_insets | Specifies the values that should be used to create a |
|
resource | This is not a type on its own. Its value should match the name of a resource in the resource list, resulting in using that resource's value wherever the resource name is referenced by the |
|
The Style List
The second element in the theme file's root array is the style list. The style list is a list of style keys and values. Each style has one key and one value dictionary. For example:
"UITextView" : {
"textColor" : "@resource:blackColor",
"backgroundColor" : "@resource:primaryColor",
"alpha" : "@float:1.0"
}In this example, UITextView is the style key, and the text inside and including the curly braces is the value dictionary. The style key can take three different formats, detailed in the following table:
Type | Explanation | Example |
|---|---|---|
View | This is a string that directly matches the name of a |
|
View when used inside a view or views | This is used the same as View, except that the string that matches the |
|
Style ID | To distinguish a style ID from a style that maps directly to a view, it is prefixed with the tilde(~) character. The rest of the string must be unique in the file. A style that has a style ID is not applied automatically - it must be manually applied the style to a view. |
|
