A theme defines the look and feel of an application’s
visual components. A theme can define something as simple as the
color scheme or common font for an application, or it can be a complete
reskinning of all the components used by the application.
The default theme for Flex 4 components is Spark. All controls
in an application built with Flex 4 use the Spark theme. Even MX
controls have a Spark look and feel in a Flex 4 application.
The Spark theme is a combination of styles and skin classes that
define the appearance of the components in the spark.components
package. This theme is defined in the defaults.css style sheet in
the spark.swc file. Spark components use the skin classes in the
spark.skins.spark.* package. MX components use the skin classes
in the mx.skins.spark.* package.
For Flex 3, the default theme was called Halo. The components
that used the Halo theme are in the mx.controls.* package. They
are typically referred to as MX components. In Flex 4, however,
the MX components use the Spark theme to define their appearance
by default. This is set in the defaults.css file in the framework.swc
To use the Halo theme in a Flex 4 application, you can use the theme compiler option
to point to the Halo theme SWC file, or you can set the compatibility-version compiler
option to 3.0.0. If you use the Halo theme, then the Halo theme
is applied only to MX components in your application. The Spark
components continue to use the Spark theme unless you specifically
Themes usually take the form of a SWC file. However, themes can
also be a CSS file and embedded graphical resources, such as symbols
from a SWF file. Theme SWC files can also be compiled into style
SWF files so that they can be loaded at run time. For more information,
see Using theme SWC files as run-time style sheets.
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
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:
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.
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:
On the command line, you can use the += operator
with the theme compiler option to apply themes
additively. The following example applies the BullyBuster.swc theme,
in addition to the default theme:
mxmlc -theme+=themes/BullyBuster.swc MainApp.mxml
Creating color schemes
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.
The following table describes the color styles that you use most
often to create a color scheme in Spark applications:
The background color of the application.
The base color of the component. The default
skins are based on various shades of gray. The chromeColor style
is applied as a color transformation (tinting), which preserves
all of the visual fidelity of the default appearance. Items colorized by
other color style values are not affected by chromeColor.
The color of text in a component.
The color of the content area of components
that contain content.
The color of the focus glow.
The background color of items when the mouse
is positioned over the item.
The background color of selected items in
a drop down list.
The color of symbols or glyphs. For example,
the arrows on a scroll bar or the check mark in a CheckBox control.
The following example lets you toggle between two color schemes.
It shows that the colors are inherited by all Spark controls in
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
About the included theme files
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
The following table describes these themes:
Contains the AeonGraphical.css file and
the AeonGraphical.swf file. This is the graphical version of the Halo
theme, which is only used by MX components.
The source FLA
file for the graphical assets is in the AeonGraphical Source directory.
You change the graphical assets in this file by using the Flash
IDE. You must ensure that you export the SWF file, which is used
by the theme in Flex.
The Halo theme uses the halo.swc theme file
and the classes in the mx.skins.halo package. For more information
about the default theme assets, see About the default style sheets.
Contains the Ice.css file.
Contains the Institutional.css file.
Contains the defaults.css file for mobile
applications. For more information, see Mobile
The themes in the samples/themes directory
include arcade, cobalt, and graphite. These theme files should be
considered sample quality. Before you use them in production applications,
be sure to test them thoroughly.
Contains the Smoke.css file and a background
An alternate theme for the Spark components.
This theme gives a simple, wireframe appearance to an application.
It might be appropriate to use it when developing a prototype or
“proof of concept” application. This theme is also useful as a starting
point to write custom skins, particularly if they are not styleable.
This is because the skin classes in the Wireframe theme file are
simpler than their Spark counterparts.
Contains the Wooden.css file and a background
To apply a theme to an application, you use the theme compiler
option, as the following example shows:
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.
Creating a theme SWC file
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.
Creating a theme style sheet
A theme typically consists of a style sheet and any assets
that the style sheet uses. These assets can be graphic files or
programmatic skin classes. For the Spark theme, the assets are skin
classes that use a combination of MXML and FXG syntax to draw the
skin. For the Halo theme, the assets are typically ActionScript class
files that extend Halo skin classes.
To add MXML skins to a Spark theme file, you use a ClassReference statement
to specify the class name (not the file name) for each component.
You must also specify a namespace and the Spark skin class for that
component. The following is a typical CSS file that defines a small
The name you provide for the Embed keyword is
the same name that you use for the skin asset when compiling the
The CSS file can include any number of class selectors, as well
as type selectors. Style definitions for your theme do not have
to use skins. You can simply set style properties in the style sheet,
as the following example shows:
You compile a theme SWC file by using the include-file and include-classes options
of the component compiler. This is the same compiler that creates
component libraries and Runtime Shared Libraries (RSLs).
You invoke the component compiler either with the compc command
line utility or when creating a Library Project in Adobe Flash Builder.
You use the include-file option to add the CSS
file and graphics files to the theme SWC file. You use the include-classes option
to add programmatic skin classes to the theme SWC file.
Using the include-file option to compile theme SWC files
The include-file option
takes two arguments: a name and a path. The name is the name that
you use to refer to that asset as in the CSS file. The path is the
file system path to the asset. When using include-file,
you are not required to add the resources to the source path. The
following command line example includes the upIcon.jpg asset in
the theme SWC file:
also specify the CSS file as a resource to include in the theme
SWC file. You must include the .css extension when you provide the
name of the CSS file; otherwise, Flex does not recognize it as a
style sheet and does not apply it to your application.
use the component compiler to compile theme assets, such as a style
sheet and graphical skins, into a SWC file. The following example
compiles a theme by using the compc command-line compiler:
You cannot pass
a list of assets to the include-file option. Each
pair of arguments must be preceded by ‑include-file.
Most themes use many skin files and style sheets, which can be burdensome
to enter each time you compile. To simplify this, you can use the load-config option
to specify a file that contains configuration options, such as multiple include-file options.
For more information, see Using a configuration file to compile theme SWC files.
Using the include-classes option to compile theme SWC files
The include-classes option
takes a single argument: the name of the class to include in the
SWC file. You pass the class name and not the class filename (for example,
MyButtonSkin rather than MyButtonSkin.as). The class must be in
your source path when you compile the SWC file.
command-line example compiles a theme SWC file that includes the
CSS file and a single programmatic skin class, MyButtonSkin, which
is in the themes directory:
Using a configuration file to compile theme SWC files
Using a configuration file is generally more verbose than
passing options on the command line, but it can make the component
compiler options easier to read and maintain. For example, you could
replace a command line with the following entries in a configuration