Back

colors

Hello World

Content:
- Base color objects

MUI colors are accessible through the colors property of the MUI object.

MUI.colors → Object

Tip. To avoid longer lines assign the color set to a variable

var gray = MUI.colors.blueGray

To select a color and shading choose the right property of the base color objects: lighten4, lighten3, lighten2, lighten1, darken1, darken2, darken3, darken4.

Example - All Colors From Green

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.green

    lay = MUI.CreateLayout("Linear", "VCenter, FillXY")

        btn1 = MUI.CreateButtonRaised("LIGHTEN4", 0.35, null, color.lighten4)
        lay.AddChild(btn1)

        btn2 = MUI.CreateButtonRaised("LIGHTEN3", 0.35, null, color.lighten3)
        lay.AddChild(btn2)

        btn3 = MUI.CreateButtonRaised("LIGHTEN2", 0.35, null, color.lighten2)
        lay.AddChild(btn3)

        btn4 = MUI.CreateButtonRaised("LIGHTEN1", 0.35, null, color.lighten1)
        lay.AddChild(btn4)

        btn5 = MUI.CreateButtonRaised("GREEN", 0.35, null, color.green)
        lay.AddChild(btn5)

        btn6 = MUI.CreateButtonRaised("DARKEN1", 0.35, null, color.darken1)
        lay.AddChild(btn6)

        btn7 = MUI.CreateButtonRaised("DARKEN2", 0.35, null, color.darken2)
        lay.AddChild(btn7)

        btn8 = MUI.CreateButtonRaised("DARKEN3", 0.35, null, color.darken3)
        lay.AddChild(btn8)

        btn9 = MUI.CreateButtonRaised("DARKEN4", 0.35, null, color.darken4)
        lay.AddChild(btn9)

    app.AddLayout(lay)
}

Copy All Run

Example - Change Layout Background

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal

    lay = MUI.CreateLayout("linear", "FillXY,VCenter")

        btn = MUI.CreateButtonRaised("Choose Color", 0.4)
        btn.SetOnTouch(ShowDialog)
        lay.AddChild(btn)

    app.AddLayout(lay)

    var choices = [
        {name: "lighten4"},
        {name: "lighten3"},
        {name: "lighten2"},
        {name: "lighten1"},
        {name: "teal"},
        {name: "darken1"},
        {name: "darken2"},
        {name: "darken3"},
        {name: "darken4"}
    ]
    lsd = MUI.CreateListDialog("Select Color", choices)
    lsd.SetOnSelect(OnSelect)
}

function ShowDialog()
{
    lsd.Show()
}

function OnSelect(name)
{
    lay.SetBackColor(color[name])
}

Copy All Run

Base color objects

MUI.colors.red

MUI.colors.pink

MUI.colors.purple

MUI.colors.deepPurple

MUI.colors.indigo

MUI.colors.blue

MUI.colors.lightBlue

MUI.colors.cyan

MUI.colors.green

MUI.colors.lightGreen

MUI.colors.lime

MUI.colors.yellow

MUI.colors.amber

MUI.colors.orange

MUI.colors.deepOrange

MUI.colors.brown

MUI.colors.gray

MUI.colors.blueGray