Styles constants on Alloy

You must Login before you can answer or comment on any questions.


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
answer permalink
  • 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 1 year ago by Michael Stelly

  • Show 1 more comment

Your Answer

Think you can help? Login to answer this question!