With this tool you can now change the Hue(colors), Saturation(intensity of colors) and Lighting(brightness of colors) of the current xtheme-blue.css for ExtJS 3.0.3 version.
The ranges are for hue -360 to 360 Saturation -100 to 100 and lightness -100 to 100.
Take care with the lightness because more than +10 looks awful, i just added the posibility because is what the color charts says
Just change the hue saturation and lightness to whatever you want then press "Preview Colors". You will see a palette of colors to compare with the original blue from Ext.
[Update v0.3] I added the Human (Ubuntu) theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805) i asked him permission with a private message but i have not received the reply yet, but as it is free i used it, if he has any problem with it then i will have to change this.
[Update v0.2] Now you can view an not exact change of an image from window to preview colors.
If you like the colors then put the name (according to the colors you change) of the theme and click "Generate Theme". It will generate the xtheme-"yourtheme".css file change the gif's and png's from the original blue ones, make the ZIP file to download and then Change the theme of the tool to watch your newly generated theme.
For example if i put a hue of -59 and click preview i then see that the colors has changed to green ones. then i put the theme name "green" and click on "Generate Theme" and voala i got the zip with green theme.
If you ask how it is done, i use a lot of preg_matches and string replacements to get the colors from the file, then preg_matches to get the images and i made a Color changer with a conversion utility called color.php from PHP classes. (Just make the other functions to adapt to this tool, image changer from gif etc)
Its made in PHP with ExtJS 3.0 RC1
Any feedback about the tool is welcome.
Have Fun
ToDo:
-Include an editor of the Titles and all Fonts colors used by the theme.
LOG: v0.3
- Now we are using the 3.0.3 version of the theme.
- I added the hability to use as source the Human (Ubuntu) Theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805) v0.2
- Fixed the examples panels and windows. Thanks Shea!
- Use of a preview image of a window to see better what it will look like, Its slow but better than generating all the theme. v0.1
- Created the Color Theme Changer
- Added to the xtheme-blue.css the normal link colors for anchors (a)
- Zip file download of the generated theme
yes the examples controls looks awful, i dont know why, i just took from the examples and i am looking into getting this fixed, don't know if its a viewport thing about getting the align to the left, or that the viewport have a fixed width. But the generated theme is always good, just that the examples looks awful. You can download the theme you made and try it yourself in your projects.
My server is not that good so maybe the images of the new generated theme comes slowly.
Try some of it and you will see if its ok.
I see the theme you made its almost white. Try not to use a lot of lightness. start changing only the hue to look what it make.
You can review the colors first with the "Preview Colors" if a lot of them are #ffffff then you get a white theme.
I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..
I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..
Thanks,
It doesn't work with Ext 2.2.1 because it use another button aproach. and some other components from 2.2.1 that were really changed in this new css version. As is automated i can make any css i want, but then i have to separate the colors and all the images from main theme on 2.2.1 and thats some work. Maybe i will change it in next version.
About the 2 colors yes, i like too that aproach, but i have to make the theme (i am making some others) then i can use this tool to select what type of theme you want and generate it with the color you want. I just posted this now because i finish this work and want to share until i make the other stuff. But it takes time.
This has serious potential. Obviously, you have a lot of bugs to work through. going to watch this progress.
Thanks
Share any bugs you encounter. I am only working in the examples page, its all messed up. and i now look into IE and the slider bars goes more to the right.
About the generated theme file its ok because the script only change the colors tags to the new hue saturation and lighting, and the images/default path to the images/theme path, it doesn't mess with any, absolutely any other stuff, only the colors and the paths. Some of the generated images are bad, but if you don't like that image you can replace with the original one, or just repair it yourself. I looked when i make this and found that shadow was bad, and eliminated the generation of those images. also the loading gif are animated so i cant change the colors from the script. So if someone make a theme here, he only needs to check the images and change what they want, but the colors of borders and all backgrounds etc are OK.
Thanks for the feedback.
I am just waiting for more time to finish reading your book and found this horrible awful examples fault.
May be in future can we create in-pallete based themes.
Good work!!!
Yes i was thinking about that, but its too much of a work to have a theme editor, lol.
For next version i am planing to put a "Color Text Editor" too, because if you put for example a very dark blue on the theme the title font and other titles looks bad cause you cant read them. So first i will do that.
But in other version i will have some other themes from start, and i am thinking about using, inside and outside controls to change the colors. For example the borders of windows are outside but the grids are inside. I just have to clasify what is what.
Then, if i have time i will move to per component editor. And let people put their own images, but thats too far away. So i just share what we can do now.
Maybe i will add theme editor for 2.2.1 too because a lot of people still uses it. I am just waiting for more feedback on what people would like, so thanks for your feedback.
[UPDATED v0.3][3.X] tool, Themes (Original and Human) Color Changer
Originally Posted by pcrombach
Javier Rincón aka SysCobra
Reply With Quote
