Developing cross-platform, native apps with Titanium is easy using Alloy MVC. And, one of its most powerful features is the ability to theme apps.
With Alloy themes, you can override styles, and assets like images by placing them in a theme folder and changing the config.json file to specify a theme name.
It’s important to understand that theming is a build-time process — these aren’t themes that users can select in the app. They’re applied during the compile process.
The idea would be that you could have a similar app for various clients and use theming (and other data options) to provide a different brand / look across the apps. Think golf courses, hair salon apps, etc.
The problem with this, and for me, the most important feature that’s missing from Alloy is the ability to theme the application name, and more importantly, the configuration settings in the tiapp.xml file.
To solve this problem I created TiTh (a mashup of Titanium Themes). I was working on an app where I needed a single codebase to build four different apps across two codebases so eight apps in total. Each app would have a different name, tiapp.xml settings and so I needed a way to be able to generate a dev, test, and production build quickly.
To get started, install TiTh with:
npm install -g tith
Then, in the root of an Alloy project you can type:
to see the current theme name.
Now, to use theme-based tiapp.xml support, copy your tiapp.xml file to one of the following locations:
app/themes/app1/tiapp.xml app/themes/app1/ios/tiapp.xml app/themes/app1/android/tiapp.xml
In the example above, the first path would apply the tiapp.xml file to both iOS and Android builds. For platform-specific versions, use the platform subfolder approach.
You can do the same with the defaulticon.png:
app/themes/app1/DefaultIcon.png app/themes/app1/ios/DefaultIcon.png app/themes/app1/android/DefaultIcon.png
Now, to set a theme, use the following:
tith set app1
tith set app1 android
tith set app1 ios
TiTh will copy over the tiapp.xml and defaulticon.png from the relevant folder into the root of the project. It’ll also do a ti clean command, and you’re ready to build.
It’s important to remember not to update the tiapp.xml in the root of the project — update the theme version instead.
You can find out more about TiTh, download, play with it and contribute at https://github.com/jasonkneen/tith
In case you missed them, check out all our featured modules:
Or click the “featured module” tag below!