Themes generally take the form of a theme SWC file. These SWC files contain style sheets and skinning assets. You use the assets inside theme SWC files for programmatic skins or graphical assets, such as SWF, GIF, or JPEG files. Themes can also contain just stand-alone CSS files.

Packaging a theme as a SWC file rather than as a loose collection of files has the following benefits:

• SWC files are easier to distribute.

• SWC files cannot be modified and reapplied to the application without recompiling.

• SWC files are precompiled. This reduces application compile time, compared to compile time for skin classes that are not in a SWC file.

You apply a theme to your Flex application by specifying the SWC or CSS file with the theme compiler option. The following example uses the mxmlc command-line compiler to compile an application that uses the BullyBuster theme SWC file:

mxmlc -theme c:/theme/BullyBuster.swc c:/myfiles/flex/misc/MainApp.mxml

When compiling an application by using options in the flex-config.xml file, you specify the theme as follows:

<compiler> 
    <theme> 
        <filename>c:/theme/BullyBuster.swc</filename> 
    </theme> 
</compiler>

When you add a SWC file to the list of themes, the compiler adds the classes in the SWC file to the application’s library-path, and applies any CSS files contained in the SWC file to your application. The converse is not true, however. If you add a SWC file to the library-path, but do not specify that SWC file with the theme option, the compiler does not apply CSS files in that SWC file to the application.

For more information, see Flex compilers.

You can specify more than one theme file to be applied to the application. If there are no overlapping styles, both themes are applied completely. The ordering of the theme files is important, though. If you specify the same style property in more than one theme file, Flex uses the property from the last theme in the list. In the following example, style properties in the Wooden.css file take precedence, but unique properties in the first two theme files are also applied:

<compiler> 
    <theme> 
        <filename>../themes/Institutional.css</filename> 
        <filename>../themes/Ice.css</filename> 
        <filename>../themes/Wooden.css</filename> 
    </theme> 
</compiler>

One common way to use themes is to create a color scheme for your Flex application. This color scheme can be used to blend your application into its surrounding website, or define its overall look and feel.

In Spark applications, all styles are inheritable styles. This means that you can set any style on any level of the containment hierarchy. The styles will be inherited by all controls that are within the container that you set it on. One common use of this is to set styles on the Application tag so that the entire application uses those styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- Styles/SparkThemeColorExample.mxml -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark"
>
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.IndexChangedEvent;
            
            private function changeStyleSettings(e:Event):void {
                if (e.currentTarget.selectedItem == "Gray") {                    
                    /* Note that backgroundColor is a property and not a style. */
                    FlexGlobals.topLevelApplication.backgroundColor = 0x333333;
                    
                    FlexGlobals.topLevelApplication.setStyle("baseColor", 0x4C4C4C);
                    FlexGlobals.topLevelApplication.setStyle("color", 0xCCCCCC);
                    FlexGlobals.topLevelApplication.setStyle("contentBackgroundColor", 0x555555);
                    FlexGlobals.topLevelApplication.setStyle("symbolColor", 0xFFFFFF);
                    FlexGlobals.topLevelApplication.setStyle("rollOverColor", 0x666666);
                    FlexGlobals.topLevelApplication.setStyle("selectionColor", 0x999999);
                    FlexGlobals.topLevelApplication.setStyle("focusColor", 0xEEEEEE);
                } else {
                    FlexGlobals.topLevelApplication.backgroundColor = 0xCCCC99;
                    
                    FlexGlobals.topLevelApplication.setStyle("baseColor", 0x999966);
                    FlexGlobals.topLevelApplication.setStyle("color", 0x333300);
                    FlexGlobals.topLevelApplication.setStyle("contentBackgroundColor", 0xFFFFCC);
                    FlexGlobals.topLevelApplication.setStyle("symbolColor", 0x663300);
                    FlexGlobals.topLevelApplication.setStyle("rollOverColor", 0xFFEE88);
                    FlexGlobals.topLevelApplication.setStyle("selectionColor", 0xFFCC66);
                    FlexGlobals.topLevelApplication.setStyle("focusColor", 0xCC9900);                    
                }
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Button label="Button"/>
    <s:ToggleButton label="Toggle Button"/>
    <s:CheckBox label="CheckBox" selected="true"/>
    <s:RadioButton label="RadioButton" selected="true"/>
    <s:NumericStepper/>
    <s:TextInput/>
    <s:TextArea/>
    <s:DropDownList id="myDropDown" selectedIndex="0" 
        change="changeStyleSettings(event);">
        <s:dataProvider>
            <s:ArrayList source="[Gray,Brown]"/>
        </s:dataProvider>
    </s:DropDownList>    
</s:Application>
The executing SWF file for the previous example is shown below:

You can affect the general coloring of a Halo application without creating a new theme or changing many of the style properties in the Halo theme. You do this with the themeColor property. For more information, see Creating Halo themes.

One utility that is useful for developing color schemes is Kuler. This utility helps users create new color schemes and share them with other users. For more information, see the Kuler online application at http://kuler.adobe.com/.

Flex includes several themes that you can use without making any changes. These themes are located in the flex_install_dir/frameworks/themes directory for the SDK. For Flash Builder, the themes are located in the flex_install_dir/sdks/sdk_version/frameworks/themes directory.

mxmlc -theme="C:\Program Files\Adobe\Flex\sdks\4.0.0\frameworks\themes\Halo\halo.swc" MyApp.mxml

The following table describes these themes:

In addition to these themes, Flex also includes the MXFTEText.css theme file. This file is located in the frameworks directory. You use this theme if you want to use embedded fonts with MX controls in your Flex 4 applications. For more information, see Embedding fonts with Halo components.

To build a theme SWC file, you create a CSS file, and include that file plus the graphical and programmatic assets in the SWC file. To do this, you use the include-file option of the compc utility.

A good starting point for creating a new theme is to customize the default CSS files for the Spark and Halo components. For Spark components, customize the defaults.css file in the flex4.swc file. For Halo components, customize the defaults.css file in the framework.swc file. The following sections describe these steps in detail.