Flex change values of custom Skin at run time

Question

I have built a basic theme for my Flex app. I would like to add support for additional predefined themes. By default, app has a theme and I would like it to change when user selects a theme from dropdown list. This can be done by loading a swf file using styleManager. However, all the skins have colors hard-coded in them. So, in order to achieve this I would have to duplicate skins and change value of the colors.

Is there a better way of doing this? Can I just have a skin that will change color values dynamically based on user selection?

Answer 1

The best way is to move all hard coded colors from skin to the css. You will have to update your custom skins to take advantage of that.

so if you have a <SolidStoke color="0xff0000" /> you need to replace it by <SolidStroke color="{getStyle('yourCssPropertyName')} />

Answer 2

Another way to do it is to write your skins so they have references to their host components (see [1]). Then you extend the current host components so that they have properties for each color you want to specify (e.g. instead of using , you'd use with borderColor and fillColor as new properties).

Honestly, though, Florian's answer is probably the better way to go.

[1] - http://www.adobe.com/devnet/flex/quickstarts/skinning_components.html#host