Styles constants on Alloy


Is there any way to use custom constans in the tss files?
Something like this.

"Label.largeBig": {
    font: customContants.fonts.large,
    color: customContants.colors.darkRed

Then somewhere in the code is declared:

customContants: {
    fonts: {
        small: {
            fontSize: "12dp"
        medium: {
            fontSize: "14dp"
        large: {
            fontSize: "18dp"
    colors: {

that would be awesome.

1 Answer

  • Accepted Answer

    Yes, you can attach these constants to the Alloy.CFG object in the app/config.json file. You are able to use anything on Alloy.CFG in the TSS files, just like you can use Titanium constants or localization calls L(). For example, in your app/config.json (create it if it doesn't exist) you could do this:

    app/config.json (stripped down to what you need)

        "global": {
            "fonts": {
                "small": { "fontSize": "12dp" },
                "medium": { "fontSize": "14dp" },
                "large": { "fontSize": "18dp" },
            "colors": {}
        "dependencies": {}

    Remember to double quote your strings and keys as this is JSON, not JS. And you could then use these values in your TSS like this:


    "TextField": {
        font: Alloy.CFG.fonts.medium
    — answered 3 years ago by Tony Lukasavage
    • That work nice. What do you think about these aproach though?

      Create a lib/ui.js, here exports my fonts and colors in commonJS format.


      var customUI= require('ui');
      Alloy.UI = {
          fonts: customUI.fonts,
          colors: customUI.colors

      here I require the lib and expose those objects in the Alloy object.. (may be this is not recommended)


      "TextField": {
          font: Alloy.UI.fonts.medium

      any thoughts?

      — commented 3 years ago by Juan Ignacio Donoso
    • So here's the thing. I try to reserve namespaces on the Alloy namespace for developers that will never be overwritten by Alloy. For this purpose, we currently have Alloy.CFG and Alloy.Globals. I can't guarantee that Alloy.UI will be safe forever. I would stick to Alloy.CFG.

      Your use of app/alloy.js is perfectly valid, though, and I almost included that in my original answer. Doing this in the app/alloy.js would be the only way to populate the Alloy.CFG with dynamic values that could still be used in the styles.

      — commented 3 years ago by Tony Lukasavage
      • app: iOS mobile
      • sdk: 3.2.3.GA
      • os: osx mavericks
      • studio Titanium Studio, build:
      • output: iPhone Simulator v 7.x

      I'm attempting to execute this exact code and all I get is an error


          "global": {
              "colors": {
                  "ta_red": "#C60B20"

      TSS entry

          textAlign: 'center',
              fontSize: "16dp",
              fontFamily: "HelveticaNeue"
          left: '0',
          height: Ti.UI.SIZE,
          width: '100%',
          // color: '#C60B20'
          color: Alloy.CFG.colors.ta_red


      message = "'undefined' is not an object (evaluating 'Alloy.CFG.colors.ta_red')";

      What am I doing wrong?

      — commented a year ago by Michael Stelly
    • Yea, never mind. I had some funky cache problem or something. Studio crashed. Then when I restarted, it worked. That's what I get for using an RC version. ./doh

      — commented a year ago by Michael Stelly