      */ 
     protected function commitCurrentState():void
     {
+    }
+    
+    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        super.updateDisplayList(unscaledWidth, unscaledHeight);
+        
+        if (useChromeColor)
+        {
+            graphics.clear();
+            
+            // create gradient
+            beginChromeColorFill(graphics);
+            
+            // draw gradient shape
+            drawChromeColor(graphics, unscaledWidth, unscaledHeight);
+            
+            graphics.endFill();
+        }
+        
+        // symbol color
+        if (useSymbolColor)
+        {
+            var symbols:Array = symbolItems;
+            var len:uint = (symbols) ? symbols.length : 0;
+            
+            if (len > 0)
+            {
+                var symbolColor:uint = getStyle("symbolColor");
+                var symbolObj:Object;
+                var transformInitialized:Boolean = false;
+                
+                for (var i:uint = 0; i < len; i++)
+                {
+                    symbolObj = this[symbols[i]];
+                    
+                    // SparkSkin assumed symbols were IFill objects
+                    // with a color property. MobileSkin instead assumes symbols
+                    // are DisplayObjects.
+                    if (symbolObj is DisplayObject)
+                    {
+                        if (!transformInitialized)
+                        {
+                            colorTransform.redOffset = ((symbolColor & (0xFF << 16)) >> 16) - DEFAULT_SYMBOL_COLOR_VALUE;
+                            colorTransform.greenOffset = ((symbolColor & (0xFF << 8)) >> 8) - DEFAULT_SYMBOL_COLOR_VALUE;
+                            colorTransform.blueOffset = (symbolColor & 0xFF) - DEFAULT_SYMBOL_COLOR_VALUE;
+                            colorTransform.alphaMultiplier = alpha;
+                            
+                            transformInitialized = true;
+                        }
+                        
+                        DisplayObject(symbolObj).transform.colorTransform = colorTransform;
+                    }
+                }
+            }
+        }
+    }
+    
+    /**
+     *  Use <code>beginFill</code> or <code>beginGradientFill</code> to specify
+     *  the <code>chromeColor</code> drawn by <code>drawChromeColor</code>.
+     * 
+     *  The default implementation uses a linear gradient fill.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected function beginChromeColorFill(chromeColorGraphics:Graphics):void
+    {
+        var colors:Array = [];
+        matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0);
+        var chromeColor:uint = getStyle("chromeColor");
+        colors[0] = ColorUtil.adjustBrightness2(chromeColor, 20);
+        colors[1] = chromeColor;
+        colors[2] = ColorUtil.adjustBrightness2(chromeColor, -20);
+        
+        chromeColorGraphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
+    }
+    
+    /**
+     *  Uses the skin's Graphics object to draw a shape containing the
+     *  <code>chromeColor</code>. Fill parameters are defined by
+     *  <code>beginChromeColorFill</code>.
+     * 
+     *  @param unscaledWidth Specifies the width of the component, in pixels,
+     *  in the component's coordinates, regardless of the value of the
+     *  <code>scaleX</code> property of the component.
+     *
+     *  @param unscaledHeight Specifies the height of the component, in pixels,
+     *  in the component's coordinates, regardless of the value of the
+     *  <code>scaleY</code> property of the component.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10
+     *  @playerversion AIR 2.5
+     *  @productversion Flex 4.5
+     */
+    protected function drawChromeColor(chromeColorGraphics:Graphics, unscaledWidth:Number, unscaledHeight:Number):void
+    {
+        chromeColorGraphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
     }
 
     /**

package spark.skins.mobile.supportClasses
{
import flash.display.DisplayObject;

import mx.core.IFlexDisplayObject;
import mx.core.ILayoutElement;
import mx.core.UIComponent;
import mx.core.mx_internal;

import spark.components.supportClasses.SkinnableComponent;
import spark.core.DisplayObjectSharingMode;

 */
public class MobileSkin extends UIComponent implements IHighlightBitmapCaptureClient
{
    // Used for gradient background
    protected static var matrix:Matrix = new Matrix();
    
    protected static const ratios:Array = [0, 127.5, 255];
    
    protected static const alphas:Array = [1, 1, 1];
    
    private static const DEFAULT_SYMBOL_COLOR_VALUE:uint = 0x00;
    
    private static var colorTransform:ColorTransform = new ColorTransform();
    
    /**
     *  Specifies whether or not this skin should be affected by the <code>chromeColor</code> style.
     *
     *  @default false
     *  
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 2.5
     *  @productversion Flex 4.5
     */
    protected var useChromeColor:Boolean = false;
    
    /**
     *  Specifies whether or not this skin should be affected by the <code>symbolColor</code> style.
     *
     *  @default false
     *  
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 2.5
     *  @productversion Flex 4.5
     */
    protected var useSymbolColor:Boolean = false;
    
    //--------------------------------------------------------------------------
    //
