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
- Guide: Alloy Themes
- Guide: Project Configuration File (config.json)
- JIRA Ticket: ALOY-754
- Pull Request: #246
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