Themes
The topic includes three types of data:
- constants
- color constants
- View styles
Themes are designed as a rui file and placed in the themes folder.
The root of the theme is an object named 'theme'. This object can contain the following properties:
- name - an optional text property that specifies the name of the theme.If this property is not set or is equal to an empty string, then this is the default theme.
- constants - property object defining constants. The name of the object can be anything. It is recommended to use "_".An object can have any number of text properties specifying the "constant name" = "value" pair.This section contains constants of type SizeUnit, AngleUnit, text and numeric. In order to assign a constant to any View property,you need to assign the name of the constant to the property by adding the '@' symbol at the beginning.For example
theme { constants = _{ defaultPadding = 4px, buttonPadding = @defaultPadding, angle = 30deg, } } rui.Set(view, "subView", rui.Padding, "@defaultPadding")
- constants:touch is property object defining constants used only for touch screen.For example, how to make indents larger on a touch screen:
theme { constants = _{ defaultPadding = 4px, }, constants:touch = _{ defaultPadding = 12px, }, }
- colors is an object property that defines color constants for a light skin (default theme).An object can have any number of text properties specifying the "color name" = "color" pair.Similar to constants, when assigning, you must add '@' at the beginning of the color name. For example
theme { colors = _{ textColor = #FF101010, borderColor = @textColor, backgroundColor = white, } } rui.Set(view, "subView", rui.TextColor, "@textColor")
Color names such as "black", "white", "red", etc. are used without the '@' character.However, you can specify color constants with the same names. For example
theme { colors = _{ red = blue, } } rui.Set(view, "subView", rui.TextColor, "@red") // blue text rui.Set(view, "subView", rui.TextColor, "red") // red text
- colors:dark is an object property that defines color constants for a dark theme
- styles is an array of common styles. Each element of the array must be an object.The object name is and is the name of the style. For example,
theme { styles = [ demoPage { width = 100%, height = 100%, cell-width = "1fr, auto", }, demoPanel { width = 100%, height = 100%, orientation = start-to-end, }, ] }
To use styles, the View has two text properties "style" (Style constant) and "style-disabled" (StyleDisabled constant).The "style" property is assigned the property name that is applied to the View when the "disabled" property is set to false.The "style-disabled" property is assigned the property name that is applied to the View when the "disabled" property is set to true.If "style-disabled" is not specified, then the "style" property is used in both modes.
Attention! The '@' symbol should NOT be added to the style name. If you add the '@' symbol to the name,then the style name will be extracted from the constant of the same name. For example
theme { constants = _{ @demoPanel = demoPage }, styles = [ demoPage { width = 100%, height = 100%, cell-width = "1fr, auto", }, demoPanel { width = 100%, height = 100%, orientation = start-to-end, }, ] } rui.Set(view, "subView", rui.Style, "demoPanel") // style == demoPanel rui.Set(view, "subView", rui.Style, "@demoPanel") // style == demoPage
In addition to general styles, you can add styles for specific work modes. To do this, the following modifiers are added to the name "styles":
- ":portrait" or ":landscape" are respectively styles for portrait or landscape mode of the program.Attention means the aspect ratio of the program window, not the screen.
- ":width
- " - styles for a screen whose width is in the range specified in logical pixels. - ":width
" - styles for a screen whose width does not exceed the specified value in logical pixels. - ":width
-" - styles for a screen whose width is greater than the specified value in logical pixels. - ":height
- " - styles for a screen whose height is in the range specified in logical pixels. - ":height
" - styles for a screen whose height does not exceed the specified value in logical pixels. - ":height
-" - styles for a screen whose height is greater than the specified value in logical pixels.
For example
theme { styles = [ demoPage { width = 100%, height = 100%, cell-width = "1fr, auto", }, demoPage2 { row = 0, column = 1, } ], styles:landscape = [ demoPage { width = 100%, height = 100%, cell-height = "1fr, auto", }, demoPage2 { row = 1, column = 0, } ], styles:portrait:width320 = [ samplePage { width = 100%, height = 50%, }, ], styles:portrait:width320-640 = [ samplePage { width = 90%, height = 60%, }, ], styles:portrait:width640- = [ samplePage { width = 80%, height = 70%, }, ], }