Dynamic Style Sheet Implementation in Flex- dynamic theme chooser for you application

Introduction:What if I just choose color and my application theme gets changed. Amazing isnt it. This what this article is all about . We will use a color picker to select color and change the color theme based on that color .Its an amazing feature that you can give your users to set color theme of there application accourding to there preferences. Or you can use this feature to decide which color suits your website best.
Uses:
1) Users: Give Optionto users to change color theme themselves by just selecting color.
2) Developers: A lot of re-work is reduced because stylesheet is dynamic .
3) Designers: Designers can select the best color theme required for there applications

Dynamic stylesheet in action see this.Choose the color from color picker and whole theme changed with a single click.
Download Source file here

How to implement dynamic stylesheet in flex:All you need to do do is just place a "ColorPicker" component in your application and call the method "ChangeTheme(colorpick.selectedColor)" and pass the color selected from color picker .I have written styles for all main components if you want to add more components you can add more styles similar to I have done.Note that I have changed global styles for all components which means that all components will be efffected .i.e Following line will change color theme for all buttons in application:

StyleManager.getStyleDeclaration("Button").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]);

If you want to use styles for specific components , or say you want to use with one button and for other button diffefent style. then you can use it by defining customised css class . like this

StyleManager.getStyleDeclaration(".Button1css").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]);

Above code will update only that button with style set as ".Button1css".

private function ChangeTheme ( color:uint):void {
StyleManager.getStyleDeclaration("ApplicationControlBar").setStyle("fillColors",[color,0xffffff]); StyleManager.getStyleDeclaration(".myTabs").setStyle("fillColors",[color,color]); StyleManager.getStyleDeclaration("ComboBox").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("Button").setStyle("fillColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("Panel").setStyle("headerColors",[color,0xffffff]); StyleManager.getStyleDeclaration("Panel").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("Panel").setStyle("borderColor",ColorUtil.adjustBrightness2(color,70)); StyleManager.getStyleDeclaration("TitleWindow").setStyle("headerColors", [color, 0xffffff, color, 0xeeeeee]); StyleManager.getStyleDeclaration("TitleWindow").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("TitleWindow").setStyle("borderColor",ColorUtil.adjustBrightness2(color,70)); StyleManager.getStyleDeclaration("ScrollBar").setStyle("fillColors", [color, ColorUtil.adjustBrightness2(color,50), color, 0xeeeeee]); StyleManager.getStyleDeclaration("HBox").setStyle("backgroundColor",ColorUtil.adjustBrightness2(color,94)); StyleManager.getStyleDeclaration("TabNavigator").setStyle("borderColor",ColorUtil.adjustBrightness2(color,80)); StyleManager.getStyleDeclaration("TextArea").setStyle("borderColor",ColorUtil.adjustBrightness2(color,80)); StyleManager.getStyleDeclaration("HBox").setStyle("borderColor",ColorUtil.adjustBrightness2(color,40)); StyleManager.getStyleDeclaration("DataGrid").setStyle("borderColor",ColorUtil.adjustBrightness2(color,40)); StyleManager.getStyleDeclaration("DataGrid").setStyle("headerColors",[ColorUtil.adjustBrightness2(color,80),0xffffff]); StyleManager.getStyleDeclaration("DataGrid").setStyle("alternatingItemColors",[ColorUtil.adjustBrightness2(color,90),0xffffff]);
}