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%,
		},
	],
}