Update Feb 5, 2015: Now ALOY-378 is resolved, it’s better to overwrite widget styles via an Alloy theme. Then app/themes/widgets/my.widget/styles/index.tss will me merged with app/widgets/my.widget/styles/index.tss.

With ALOY-378 being postponed every sprint (no offence to hard-working Tony), let’s look at how to best make your Alloy widgets styleable with current techniques. The goal is to allow developers to use and style your widget without making changes to it. I use the technique I explain here for my loading widget.

1. In the XML give all elements that need to be styleable both an id and a class attribute holding the same value.
   • This value should be unique to any app it might be used in. You could use the widget’s id – which should be in reverse domain name style – in camel case as a prefix. So nl.fokkezb.loading would give nlFokkezbLoading_someView.
2. In the TSS use the classes (.nlFokkezbLoading_someView) to style the view elements.
3. In your README instruct developers to override the default styles by using the ID’s (#nlFokkezbLoading_someView)  in their app.tss file.

That’s it! Alloy will apply any styles in an app’s app.tss file to all controllers, including widgets. Just like in CSS, a style-property set to the id overrules the same property set to the class of the same element. By applying the default style to the class, the style can be fully overridden using the element’s id.

Give the loading widget a try to see how easy this works.