Flex 4 Custom Spark Skin using gobal CSS color schemes

1.Flex 4  CSS theme sample

 

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

global
{
    chrome-color: #333333;
    color: #CCCCCC;
    content-background-color: #777777;
    symbol-color: #000000;
    roll-over-color: #555555;
    selection-color: #333333;
    focus-color: #999999;
    accent-color: #8C8C8C;
}

 

2.Custom skin

(1) this skin should be affected by the chromeColor style

        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();

        }

 

(2)Names of items ("someCustomColorID1","someCustomColorID2") should not be colorized by the chromeColor style.

Only items of type DisplayObject or GraphicElement should be excluded.

override public function get colorizeExclusions():Array
   {
       return ["someCustomColorID1","someCustomColorID2"];
 }

 

(3)Names of items ("someCustomColorID1","someCustomColorID2") should have their color property defined by the symbolColor style

override public function get symbolItems():Array {
           return ["someCustomColorID1","someCustomColorID2"];
       }

 

(4)Names of items ("someCustomColorID1","someCustomColorID2")  should have their color property defined by

  the contentBackgroundColor style.

override public function get contentItems():Array
   {
       return ["someCustomColorID1","someCustomColorID2"];
 }