Alloy 1.4.0: Theming config.json

This is the first of a series of blogs on new features and (breaking) changes in the upcoming Titanium 3.3.0 and Alloy 1.4.0 releases. Get the beta versions!

Alloy Themes have been great when it comes to branding white-label apps. You can overwrite any asset (logos..) or style (colors, fonts..) without touching the app/assets and app/styles folders that would keep the defaults. All it takes is having an app/themes/mytheme folder containing assets and styles for a specific brand and select the theme to be used in your config.json file:

{
  "global": {
    "theme": "mytheme"
  }
}

Why config.json?

However, if a font or color is used all over your styles, it still requires quite some code to override. Even when developing apps with no intent to use themes, you probably already use the config.json mentioned above to keep the use of colors and fonts DRY so you can easily make changes:

{
  "global": {
    "regularFont": {
      "fontSize": 17,
      "fontFamily": "OpenSans-Light"
    },
    "primaryColor": "#F00",
    "secondaryColor": "#0F0"
  }
}
"Label": {
  font: Alloy.CFG.regularFont,
  color: Alloy.CFG.primaryColor
}

For white-label apps you would probably also use the config.json to store keys, contact information and other small bits of content used in the app.

The problem however was… config.json could not be themed.

Well, now it can!

In the upcoming Alloy 1.4.0 you will be able to theme your config.json. Just create a app/themes/mytheme/config.json that contains just the properties you need to override. At compile-time, Alloy will deep-merge the properties for you!

Related links

App imagineer: Imagining, Engineering & Speaking about Native mobile Apps with Appcelerator Titanium & Alloy • Meetup organizer • Certified Expert • Titan

Comments

  • Xavier Lacot

    You may also want to use ltss, which allows the definition of variables inside the ltss files, “ala less or sass”: https://github.com/dbankier/ltss

  • Marek Zwick

    But seems there is no property merging: if I define a “test”:{“c”:1} in the main config json and then a “test”:{“a”:2,”b”:2} in my theme, I get a no “test”:{“a”:2,”b”:2, “c”:1} as I would expect but a “test”:{“a”:2,”b”:2}.

    So seems the same behaviour as with the font properties as in pre alloy 1.4