class UITheme

Represents a set of default styles and component presets.


(): UITheme

.current static


The current theme. This value may be changed but it is not observed.

.getTextColor() static

(bg: Stringable): string

Returns a suitable text color for given background color (mostly black, or mostly white).

.isBrightColor() static

(color: Stringable): boolean

Returns true if the pseudo-luminance of given color (in hex format #112233 or #123 or rgb(a) format rgb(255, 255, 255) or hsl format hsl(255, 0%, 0%)) is greater than 55%; can be used e.g. to decide on a contrasting text color for a given background color.

.mixColors() static

(color1: Stringable, color2: Stringable, p: number): string

Returns a color in rgb(a) format (e.g. rgb(40,60,255) rgba(40,60,255,.5)) that lies between given colors (in hex format #112233 or #123 or rgb(a) format rgb(255, 255, 255)) at given point (0-1, with 0 being the same as the first color, 1 being the same as the second color, and 0.5 being an equal mix).

.replaceColor() static

(color: Stringable): string

Replace color variables in given string with colors from UITheme.colors.

  • @green is substituted with the color green defined in UITheme.colors

  • @green-20% takes the color green and darkens by 20%

  • @green+20% takes the color green and lightens by 20%

  • @green^-20% takes the color green and darkens light colors, lightens dark colors by 20%

  • @green^+20% takes the color green and lightens light colors, darkens dark colors by 20%

  • @green/80% takes the color green and makes it 20% (more) transparent

  • @green:text is substituted with a contrasting text color (mostly-opaque white or black) that is readable on the color green.



Base container style, should not need to be overridden at all.



Base control style, can be overridden and extended with e.g. default text style set.



Dialog backdrop shader opacity (for DialogViewActivity), defaults to 0.3.


new () => ConfirmationDialogBuilder

Default confirmation/alert dialog builder used by ViewActivity.showConfirmationDialogAsync.


new () => UIMenuBuilder

Default platform dependent menu builder.


{ [name: string]: string; }

Set of predefined colors.


(name: string, color: Stringable): this

Define a new color with given name; may reference another color, see UITheme.replaceColor.


{ [name: string]: string; }

Set of basic icons that can be used on labels or buttons (empty by default).


(name: string, icon: string): this

Define a new icon with given name.


{ [name: string]: UIStyle; }

Set of named style set mixins that can be applied to a UI component, or on a preset object using the style property in the first argument to Component.with. Overridden styles should also include base styles (button, button_primary, etc.).


(name: string, styles: Partial<StyleObjects>): this

Add a mixin style with given name and style set.


(...styles: UIStyle[]): this

Add given mixin styles, using their own name (i.e. UIStyle.name).