Flex 4 Custom Spark Skin using gobal CSS color schemes

Document directory

• 1. Flex 4 CSS theme sample
• 2. Custom skin

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 shocould be AffectedBy ChromeColorStyle

        override protected function initializationComplete():void

        {

            useChromeColor = true;

            super.initializationComplete();

        }

(2) Names of items ("someCustomColorID1", "someCustomColorID2") shocould Not be colorizedBy ChromeColorStyle. Only items of type DisplayObject or GraphicElement shocould be excluded.

 override public function get colorizeExclusions():Array

    {

        return ["someCustomColorID1","someCustomColorID2"];  

  }

(3) Names of items ("someCustomColorID1", "someCustomColorID2") shocould have their ColorProperty defined by SymbolColorStyle

 override public function get symbolItems():Array {

            return ["someCustomColorID1","someCustomColorID2"]; 

        }

(4) Names of items ("someCustomColorID1", "someCustomColorID2") shocould have their ColorProperty defined by ContentBackgroundColorStyle.

 override public function get contentItems():Array

    {

        return ["someCustomColorID1","someCustomColorID2"];    

  }