Changing the Flex ColorPicker control’s swatch panel background color

The following example shows you how you can change the ColorPicker control’s background color in Flex 3 by setting the backgroundColor style using CSS and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            backgroundColor: haloBlue;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function backgroundColor_change(evt:ColorPickerEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("backgroundColor", evt.color);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker change="backgroundColor_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker"
            styleName="myColorPicker"
            editable="false" />

</mx:Application>

View source is enabled in the following example.

As you can see, the background color uses a gradient from the specified color to a medium gray color (0xC4CCCC). If you want to have a solid colored swatch panel background that doesn’t use a gradient, you can set the highlightColor style to the same value as the backgroundColor style, as shown in the following example (new code in red):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myColorPicker {
            swatchPanelStyleName: myCustomSwatchPanelStyleName;
        }

        .myCustomSwatchPanelStyleName {
            backgroundColor: haloBlue;
            highlightColor: haloBlue;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function backgroundColor_change(evt:ColorPickerEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
                cssObj.setStyle("backgroundColor", evt.color);
                cssObj.setStyle("highlightColor", evt.color);

                colorPicker.open();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker change="backgroundColor_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ColorPicker id="colorPicker"
            styleName="myColorPicker"
            editable="false" />

</mx:Application>

View source is enabled in the following example.

0 thoughts on “Changing the Flex ColorPicker control’s swatch panel background color

  1. HiPeter
    Please i need this example:
    contextMenu on the RichTextEditor that adds selected text to the List.

    thank you in advance

    flexLover

  2. I’ve was stuck for some time trying to style the ColorPicker when it’s been created in AS3 (without MXML). I thought I’d record the issue here in case anyone else has encountered it.

    I kept trying this:

    var colorPicker:ColorPicker = new ColorPicker();
    var pickerStyle:CSSStyleDeclaration = new CSSStyleDeclaration(“pickerStyle”);
    pickerStyle.setStyle(“backgroundColor”, 0xFF0000);
    colorPicker.setStyle(“swatchPanelStyleName”, “pickerStyle”);

    – which fails, without providing any error.

    The problem is with the last line. Even though “swatchPanelStyleName” suggests a string, you actually have to set the style to the object, not it’s name. So, in the above example:

    colorPicker.setStyle(“swatchPanelStyleName”, pickerStyle);

    – works fine.