app.colors

Provides nice and easy color palette. Courtesy Google Material Design. We can use this in layout, script, and event tags.

Usage in Layout tag:

...
<Label
text="Red Coloured Text"
textColor="@color/red"/>
...

Usage in javascript:

...
<Layout>
<Button
id="test_button"
text="My Test Button"/>
</Layout>
...
...
<event on="ready">
const testButton = this.layout.findContent('test_button');
testButton.backgroundColor = app.colors.blue;
</event>
...

Constants#

NameTypeDescription
redLightnumbervalue: 0xFFCDD2
rednumbervalue: 0xF44336
redDarknumbervalue: 0xB71C1C
pinkLightnumbervalue: 0xF8BBD0
pinknumbervalue: 0xE91E63
pinkDarknumbervalue: 0x880E4F
purpleLightnumbervalue: 0xE1BEE7
purplenumbervalue: 0x9C27B0
purpleDarknumbervalue: 0x4A148C
indigoLightnumbervalue: 0xC5CAE9
indigonumbervalue: 0x3F51B5
indigoDarknumbervalue: 0x1A237E
blueLightnumbervalue: 0xBBDEFB
bluenumbervalue: 0x2196F3
blueDarknumbervalue: 0x0D47A1
cyanLightnumbervalue: 0xB2EBF2
cyannumbervalue: 0x00BCD4
cyanDarknumbervalue: 0x006064
tealLightnumbervalue: 0xB2DFDB
tealnumbervalue: 0x009688
tealDarknumbervalue: 0x004D40
greenLightnumbervalue: 0xC8E6C9
greennumbervalue: 0x4CAF50
greenDarknumbervalue: 0x1B5E20
limeLightnumbervalue: 0xF0F4C3
limenumbervalue: 0xCDDC39
limeDarknumbervalue: 0x827717
yellowLightnumbervalue: 0xFFF9C4
yellownumbervalue: 0xFFEB3B
yellowDarknumbervalue: 0xF57F17
amberLightnumbervalue: 0xFFECB3
ambernumbervalue: 0xFFC107
amberDarknumbervalue: 0xFF6F00
orangeLightnumbervalue: 0xFFF3E0
orangenumbervalue: 0xFF9800
orangeDarknumbervalue: 0xE65100
brownLightnumbervalue: 0xD7CCC8
brownnumbervalue: 0x795548
brownDarknumbervalue: 0x3E2723
grayLightnumbervalue: 0xF5F5F5
graynumbervalue: 0x9E9E9E
grayBluenumbervalue: 0x607D8B
grayDarknumbervalue: 0x212121
whitenumbervalue: 0xffffff
blacknumbervalue: 0x000000
greyLightnumbervalue: 0xF5F5F5
greynumbervalue: 0x9E9E9E
greyBluenumbervalue: 0x607D8B
greyDarknumbervalue: 0x212121
transparentnumbervalue: 0xff000000

Methods#

NameReturn TypeDescription
rgbanumberConvert RGBA format into 0xTTRRGGBB hex.
hexAlphanumberCombines 0.0 - 0.1 alpha value with 0xRRGGBB color hex.

rgba#

app.colors.rgba(red, green, blue);

Convert RGBA format into 0xTTRRGGBB hex. Whereas:

  • TT: Hex between 0x00 - 0xff that represents Transparency (0x00 means opaque and 0xff means full transparent)
  • RR: Hex between 0x00 - 0xff that represents Red
  • GG: Hex between 0x00 - 0xff that represents Green
  • BB: Hex between 0x00 - 0xff that represents Blue

Parameters:

  1. red: (number type) Integer between 0 - 255 that represents Red color
  2. green: (number type) Integer between 0 - 255 that represents Green color
  3. blue: (number type) Integer between 0 - 255 that represents Blue color

Return: number


hexAlpha#

app.colors.hexAlpha(hex, alpha);

Combines 0.0 - 0.1 alpha value with 0xRRGGBB color hex. Whereas:

  • RR: Hex between 0x00 - 0xff that represents Red
  • GG: Hex between 0x00 - 0xff that represents Green
  • BB: Hex between 0x00 - 0xff that represents Blue

Parameters:

  1. hex: (number type) 0xRRGGBB color hex
  2. alpha: (number type) Decimal number between 0.0 - 1.0 that represents opacity

Return: number