1 Reply Latest reply on Aug 4, 2009 6:09 AM by Gregory Lafrance

    themeColor problem

    megatron242

      Hi,

       

      I'm trying to create a dark themed button. Yet, I can't set a dark gray themeColor color, which means that when the button is pressed down, it becom light instead of dark.

       

      Button
      {
          fillAlphas: 0.4, 0.8, 0.1, 0.5;
          fillColors: #000000, #000000, #000000, #000000;
          cornerRadius: 0;
          themeColor: #000000;
          borderColor: #000000;
      }

       

      In the above example, one whould have guessed that when pressing the button, it's color would be black or near black. In reality, it's a light gray.

       

      Does anyone why it's acting like this?

       

      thanks,

      Vince

        • 1. Re: themeColor problem
          Gregory Lafrance Level 6

          You can only do so much with the "color" styles, and you can do more with the text of the component than you can with the background, etc.

           

          In this case, theme color will affect the highlights, appearance of the control when it is selected, and other similar visual cues. See the ToggleButtonBar in the sample code below for an example of when the black theme color takes effect.

           

          For the "down", "selected", etc. colors for a button, etc., you need to do some skinning, and in Flex 3 that means graphics, or programmatic skinning, but in any case not as simple as simply setting something like the theme color, unfortunately. Flex 4 reworks skinning to be a bit better.

           

          If this post answers your question or helps, please mark it as such.

           

          < ?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            creationComplete="init();">
            <mx:Script>
              <![CDATA[
                private function init():void{
                }
              ]]>
            </mx:Script>
            <mx:Style>
              Button{
                fillAlphas: 0.4, 0.8, 0.1, 0.5;
                fillColors: #000000, #000000, #000000, #000000;
                cornerRadius: 0;
                themeColor: #000000;
                borderColor: #000000;
              }
            </mx:Style>
            <mx:Button label="Test Button"/>
            <mx:ToggleButtonBar themeColor="0x000000">
              <mx:dataProvider>
                <mx:String>One</mx:String>
                <mx:String>Two</mx:String>
                <mx:String>Three</mx:String>
              </mx:dataProvider>
            </mx:ToggleButtonBar>
          </mx:Application>

          1 person found this helpful