Themes in Adobe AIR

Question

What is the best way to skin/theme an AIR application. For example, I want to use a dark/blackish theme instead (similar to Tour de Flex) instead of the default gray one.

Answer 1

I'm only just getting started in AIR as well, but if you're using Flex check out the Flex in a Week video series. There are several videos that cover creating custom MXML components and item renderers, which effectively let you skin your application.

You can also use CSS to style your app.

Answer 2

First you need to set the system chrome property in the air application properties file to none.

<initialWindow>
...
<systemChrome>none</systemChrome>
...
</initialWindow>

If the main file in your air app is named Main.mxml, then your application properties files will be named Main-app.xml. This file is not hard to find, it should be in the same location as the Main.mxml file.

By setting this property to none you are saying that you do not wish your air app window to take the style of the OS windows in which the app is running.

Since this property is set to none, the chrome for the air app will have to come from your Main.mxml file, which should be a WindowedApplication

Use the titleBarBackgroundSkin attriubute of the WindowedApplication To set the skin for the air app. titleBarBackgroundSkin defaults to "mx.skins.halo.ApplicationTitleBarBackgroundSkin"

Answer 3

The ScaleNine themes are a good place to start, find one that is sort of like what you want, plug it into your app, and gradually replace the colors, images, and controls with your own.

http://www.scalenine.com/