Skip to main content
Version: Next

Color

Overview​

API Reference: UI.Color

Color is used to color UI objects and its elements. A Color instance is created by passing RGB-ARGB values or a hexadecimal string. There are constant and predefined colors as well.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
script/pages/pageSample.ts
import PageSampleDesign from "generated/pages/pageSample";
import Application from "@smartface/native/application";
import System from "@smartface/native/device/system";
import View from "@smartface/native/ui/view";
import { Route, Router } from "@smartface/router";
import { withDismissAndBackButton } from "@smartface/mixins";
import { styleableComponentMixin } from "@smartface/styling-context";

class StyleableView extends styleableComponentMixin(View) {}

export default class ColorSample extends withDismissAndBackButton(
  PageSampleDesign
) {
  myViewWithRed: StyleableView;
  myViewWithBlueColorWithAlpha: StyleableView;
  myViewWithHEXColor: StyleableView;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.style.apply({
      flexProps: {
        flexDirection: "ROW",
        justifyContent: "CENTER",
        alignItems: "CENTER",
      },
    });
  }

  onShow() {
    super.onShow();

    const { headerBar } =
      System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    let myRedColor = "rgb(255, 0, 0)";
    let myBlueColorWithAlpha = "rgba(100, 0, 0, 1)";
    let myHEXColor = "#00A1F1";

    this.myViewWithRed = new StyleableView();
    this.myViewWithBlueColorWithAlpha = new StyleableView();
    this.myViewWithHEXColor = new StyleableView();

    this.addChild(this.myViewWithRed, "myView1", ".view", {
      width: 100,
      height: 100,
      margin: 10,
      backgroundColor: myRedColor,
    });

    this.addChild(this.myViewWithBlueColorWithAlpha, "myView2", ".view", {
      width: 100,
      height: 100,
      margin: 10,
      backgroundColor: myBlueColorWithAlpha,
    });

    this.addChild(this.myViewWithHEXColor, "myView3", ".view", {
      width: 100,
      height: 100,
      margin: 10,
      backgroundColor: myHEXColor,
    });
  }
}

Get Color from variables​

info

In best practice, you should use predefined colors. Variables are defined in the variables.json file, variables.json file is located in the themes/yourTheme folder. It comes with the theme.

themes/yourTheme/variables.json
{
  "main": "#53B175",
  "backgroundMain": "rgba(245,249,254,1.0)",
  "backgroundSecondary": "rgba(237,243,254,1.0)",
  "textDark": "#181725",
  "textLight": "#7C7C7C"
}