jQuery Forum

Don't get me wrong, the theme-roller looks quite nice, but it does not work for me to create new themes at all.
What I want is: based upon theme-b create a new theme with the same look (shades, color saturation and so on) but in a different color. For example to make red buttons, green buttons and so on.. this is not possible in a few steps with the theme roller, since you have to insert all colors by hand and find out what they are with a seperate tool.

If you only want the same theme but in a different color, I have the solution for you.
This code snipped snipped takes an existing swatch (for extample theme-b) and adjusts all colors to a new hue (according to the HSL-specifications). Then it renames all css-classes and comments for you to easy copy-paste the generated code into your existing css file. voila, you have a new swatch in another color.

For example. hue "120" is for green, hue "360" is for red. Try taking swatch b and set the new hue to 120. you will have a copy of the theme b but colored in a green, that looks like the original blue..

1. source<br/>
2. <textarea name="csstext" id="csstext" style="width: 100px; height: 100px;"></textarea><br/>
3. new Hue Value (0-360) <input name="newhue" id="newhue"/><br/>
4. old data theme (a,b,c etc) <input name="oldtheme" id="oldtheme"/><br/>
5. new data theme (f,g,h etc) <input name="newtheme" id="newtheme"/><br/>
6. <button name="generate" id="generate">Generate!</button>
7. <br/>
8. <textarea name="result" id="result" style="width: 100px; height: 100px;"></textarea>

JS code to be copied on the bottom of your html file inside <script></script>:

1. function hexToRgb(hex) {
2.     var r = parseInt(hex.substr(1,2), 16); // Grab the hex representation of red (chars 1-2) and convert to decimal (base 10).
3.     var g = parseInt(hex.substr(3,2), 16);
4.     var b = parseInt(hex.substr(5,2), 16);
5.     return { r: r, g: g, b: b};
6. }
7. function RGBtoHex(R,G,B) {
8.     return '#' + toHex(R)+toHex(G)+toHex(B);
9. }
10. function toHex(N) {
11.     if (N==null){
12.         return "00";
13.     }
14.     N=Math.round(N);
15.     N=parseInt(N);
16.     if (N==0 || isNaN(N)) {
17.         return "00";
18.     }
19.     N=Math.max(0,N);
20.     N=Math.min(N,255);
21.     N=Math.round(N);
22.     return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
23. }
24. function rgbToHsl(r, g, b){
25.     r /= 255, g /= 255, b /= 255;
26.     var max = Math.max(r, g, b), min = Math.min(r, g, b);
27.     var h, s, l = (max + min) / 2;
28.     if(max == min){
29.         h = s = 0; // achromatic
30.     }else{
31.         var d = max - min;
32.         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
33.         switch(max){
34.             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
35.             case g: h = (b - r) / d + 2; break;
36.             case b: h = (r - g) / d + 4; break;
37.         }
38.         h /= 6;
39.     }
40.     return new hsl(h,s,l);
41.     //return { h: h, s: s, l: l };
42. }
43. /**
44.  * Converts an HSL color value to RGB. Conversion formula
45.  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
46.  * Assumes h, s, and l are contained in the set [0, 1] and
47.  * returns r, g, and b in the set [0, 255].
48.  *
49.  * @param   Number  h       The hue
50.  * @param   Number  s       The saturation
51.  * @param   Number  l       The lightness
52.  * @return  Array           The RGB representation
53.  */
54. function hslToRgb(h, s, l){
55.     var r, g, b;
56.     if(s == 0){
57.         r = g = b = l; // achromatic
58.     }else{
59.         function hue2rgb(p, q, t){
60.             if(t < 0) t += 1;
61.             if(t > 1) t -= 1;
62.             if(t < 1/6) return p + (q - p) * 6 * t;
63.             if(t < 1/2) return q;
64.             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
65.             return p;
66.         }
67.         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
68.         var p = 2 * l - q;
69.         r = hue2rgb(p, q, h + 1/3);
70.         g = hue2rgb(p, q, h);
71.         b = hue2rgb(p, q, h - 1/3);
72.     }
73.     return { r: r * 255, g: g * 255, b: b * 255 };
74. }
75. function hsl(h,s,l) {
76.     this.h = h;
77.     this.s = s;
78.     this.l = l;
79.     this.setHasDeg = function(degree) {
80.         this.hdeg = degree / 360;
81.     }
82. }
83. $(document).ready(function() {
84.     $('#generate').click(function(){
85.         var cssFile = $('#csstext').val();
86.         var newHue = $('#newhue').val();
87.         var result = $('#result');
88.         var oldTheme = $('#oldtheme').val();
89.         var newTheme = $('#newtheme').val();
90.        
91.         function replaceCallback(color){
92.             console.log('changing: ' + color);
93.             color = hexToRgb(color);
94.             color = rgbToHsl(color.r,color.g,color.b);
95.             color.h = (newHue / 360);
96.             color = hslToRgb(color.h,color.s,color.l);
97.             color = RGBtoHex(color.r,color.g,color.b);
98.             console.log('changed to: ' + color);
99.             return color;
100.         }
101.        
102.         cssFile = cssFile.replace(/#[0-9A-Fa-f]{6}/g, replaceCallback);
103.         cssFile = cssFile.replace(new RegExp("-" + oldTheme + " ", "g"), "-" + newTheme + " "); // z.B: .ui-bar-f --> .ui-bar-t
104.         cssFile = cssFile.replace(new RegExp("-" + oldTheme + ",", "g"), "-" + newTheme + ","); // z.B: .ui-bar-f, --> .ui-bar-f,
105.         cssFile = cssFile.replace(new RegExp("{" + oldTheme + "-", "g"), "{" + newTheme + "-"); // convert comments to keep compatible with the theme-roller
106.         //cssFile = cssFile.replace(new RegExp("/\/\* " + oldTheme.toUpperCase() + "/", "g"), "/* " + newTheme.toUpperCase()); // Header line..
107.         result.val(cssFile);
108.     });
109. });