About themes

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 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 theme/BullyBuster.swc 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.

Themes are additive. 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>

mxmlc -theme+=themes/BullyBuster.swc MainApp.mxml

One common way to use themes is to create a color scheme for your 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, most styles are inheritable styles. This means that you can set any style on any level of the containment hierarchy. The inheritable 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/mx" 
    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") {                    
                    FlexGlobals.topLevelApplication.setStyle("backgroundColor", 0x333333);                    
                    FlexGlobals.topLevelApplication.setStyle("chromeColor", 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.setStyle("backgroundColor", 0xCCCC99);                                        
                    FlexGlobals.topLevelApplication.setStyle("chromeColor", 0x999966);
                    FlexGlobals.topLevelApplication.setStyle("color", 0x996600);
                    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 MX components 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 a Halo theme.

A useful utility 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. Some are for version compatibility, some are for testing, and some are purely for visual appearance. Most themes are located in the sdk_install_dir/frameworks/themes directory for the SDK. For Flash Builder, the themes are located in the flash_builder_install_dir/sdks/sdk_version/frameworks/themes directory. Other themes are in the /sdk_version/samples/themes directory.

The following table describes these themes:

mxmlc -theme=c:\Flex\frameworks\themes\Halo\halo.swc MyApp.mxml

In addition to the basic 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 MX components.

Another theme file, MXCharts.css, is meant to be used with MX-only applications that contain charting 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 MX components. For Spark components, customize the defaults.css file in the spark.swc file. For MX components, customize the defaults.css file in the framework.swc file. The following sections describe these steps in detail.