How to Change Application Theme on Adobe Flex Builder 3

Themes are collections of styles, graphical assets such as images, and skins that define the Flex application’s appearance. There are two available theme formats, a single compiled SWC file and a CSS file. Adobe Flex Builder 3 comes with some predefined themes located on Flex SDK directory, the default location is on C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes directory.

A theme can be applied into an application using two ways:

1. By using <mx:Style> tag that points to theme’s CSS file.

The tag can be inserted into MXML application after the <mx:Application> tag. The CSS file must be located on project’s root directory, if other than project’s root directory, a full absolute path to CSS file must specified.

Example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="myStyle.css"/>
<mx:Label x="188" y="154" text="Hello World" width="154" height="39" fontSize="17" color="#CEEFF6"/>
</mx:Application>

or

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes\Ice\Ice.css"/>
<mx:Label x="188" y="154" text="Hello World" width="154" height="39" fontSize="17" color="#CEEFF6"/>
</mx:Application>

2. By adding additional compiler arguments that points to theme’s CSS file.

• From an opened Flex application project , select Project -> Properties menu to open Properties window
• Select Flex Compiler section from the tree on left side Properties window
• At Additional compiler arguments field, add-theme parameter to specify path to desired theme’s CSS file

Example:

- theme “C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\frameworks\themes\Ice\Ice.css”

Properties Window

• Click OK to apply
• Run the application to open it on Web browser, the appearance should be changed to the new specified theme.