The Space For App Developers

In my previous post I gave few hints about styling Flex 4 applications using default Spark theme. This time I extended it to additional MX containers and also wanted to explain what particular CSS properties mean.

• chrome-color (chromeColor, it was renamed from baseColor after Flex 4 Beta 2) – The main color for a component
• content-background-color (contentBackgroundColor) – Color of the fill of an item renderer
• symbol-color (symbolColor) – Color of any symbol of a component. Examples include the check mark of a CheckBox or the arrow of a scroll button
• selection-color (selectionColor) – The color of text when the component is enabled and has focus
• focus-color (focusColor) – Color of focus ring when the component is in focus
• roll-over-color (rollOverColor) – Color of the highlights when the mouse is over the component
• color – Color of the text
• text-roll-over-color (textRollOverColor) – Color of the text highlights when the mouse is over the component, used in old MX components.
• accent-color (accentColor) – Additional color used for accent. This color is used by “emphasized” buttons (default button in Alert box), and the slider track highlight.

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
global
{
	chrome-color: #333333;
	content-background-color: #333333;
	symbol-color: #FFFFFF;
	selection-color: #FFB129;
	focus-color: #FF7F29;
	roll-over-color: #F7DCAD;
 
	color: #D7D6D6;
	text-roll-over-color: #D7D6D6;
 
	accent-color: #FFB129;
}
 
s|Panel
{
	background-color: #333333;
}
 
mx|Alert
{
	background-color: #333333;
}
 
mx|TabNavigator
{
	background-color: #333333;
}
 
mx|ToolTip
{
	color: #000000;
}

This it the result of applying this style sheet (same as in previous post):