UITheme

class UITheme

Represents a set of default styles and component presets.

Constructor

(): UITheme

.current static

UITheme

The current theme. This value may be changed but it is not observed, use Application.renderContext to re-render UI components after changing the theme. Use clone() to initialize a new theme instance.

.getStyle() static

(name: string, mixin?: string): UIStyle

Returns a UIStyle instance consisting of given named style(s), combined using UIStyle.mixin(...).

.getTextColor() static

(bg: string | UIColor): string

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

.isBrightColor() static

(color: string | UIColor): 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: string | UIColor, color2: string | UIColor, 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: string | UIColor): 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.

.clone()

(): UITheme

Create a new theme with the same properties, colors, icons, and styles (i.e. a ‘deep’ copy).

.modalDialogShadeOpacity

number

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

.spacing

string | number

Default spacing between components in rows and columns, defaults to 8.

.ConfirmationDialogBuilder

new () => ConfirmationDialogBuilder

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

.MenuBuilder

new () => UIMenuBuilder

Default platform dependent menu builder.

.colors

{ [name: string]: string; }

Set of predefined colors.

.icons

{ [name: string]: string; }

Named icons that can be used on labels or buttons.

.styles

{ [name: string]: UIStyle; }

Set of named style mixins that can be applied to a UI component. These include default styles such as ‘control’, ‘container’, ‘button’, ‘textfield’, etc., but may also include custom styles so that they can be referenced by name.

.setStyle()

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

Add or extend a named style in styles with given style set; returns the new UIStyle instance.

↑ Back to top