diff --git a/app/assets/javascripts/orbitdesktop.js b/app/assets/javascripts/orbitdesktop.js
index d0a7e3f0..2d991376 100755
--- a/app/assets/javascripts/orbitdesktop.js
+++ b/app/assets/javascripts/orbitdesktop.js
@@ -568,38 +568,7 @@ var orbitDesktop = function(dom){
 								return false;
 							});
 						});
-
-						loadthmc();
-						function loadthmc(){
-							$('#color_input .color-picker').each(function(){
-								var cc = $(this).attr('for'), hex, color;
-									
-								switch(cc){
-									case 'thmtxt':
-									case 'thmtxth':
-										hex = 'color';
-										break;
-									case 'g_sep':
-										hex = 'borderColor';
-										break;
-									default:
-										hex = 'backgroundColor';
-										break;
-								}
-								
-								color = $('.'+cc).css( hex );
-								$(this).val(rgb2hex(color));
-
-							});
-						}
-						// Awesome RGBA to HEX (alpha ignored)
-						function rgb2hex(rgb) {
-						    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-						    function hex(x) {
-						        return ("0" + parseInt(x).toString(16)).slice(-2);
-						    }
-						    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
-						}
+						
 						$('.color-picker').miniColors({
 							change:function(hex){
 								var changewhat = $(this).attr("for");
@@ -621,6 +590,8 @@ var orbitDesktop = function(dom){
 								}
 							}
 						});
+					
+						
 						$('.theme_list li:first-child').data('clicked',true); // this line just for demo
 						$('.theme_list li').hover(function(){
 							$(this).addClass('thmc1').find('.theme_name').addClass('thmtxt');
@@ -651,10 +622,34 @@ var orbitDesktop = function(dom){
 						})
 					
 				}
+				var loadthmc = function(){
+					$('.color-picker').each(function(){
+						var cc = $(this).attr('for'), hex, color;
+						switch(cc){
+							case 'thmtxt':
+							case 'thmtxth':
+								hex = 'color';
+								break;
+							case 'g_sep':
+								hex = 'border-left-color';
+								break;
+							default:
+								hex = 'background-color';
+								break;
+							}
+						if(cc=="background")
+							color = $("#theme_preview_area").css("background-color");
+						else
+							color = $('#theme_preview_area .'+cc).css(hex);
+						$(this).miniColors("value", o.rgb2hex(color));
+					});
+				}
+				
 			$("div#settings div#panel_r").load("/desktop/settingthemes",function(){
 				$.getJSON("/desktop/get_desktop_settings",{"get":"theme","desktopid":o.desktopId},function(theme){
 					$("#st1 ul.theme_list li#"+theme).addClass("thmc1").find("span").addClass("thmtxt");
 					bindHandlers();
+					loadthmc();
 				})
 			})
 		}
@@ -695,7 +690,7 @@ var orbitDesktop = function(dom){
 			}
 				
 		})
-	}
+	};
 	o.initialize();
 }
 
diff --git a/app/assets/javascripts/orbitdesktopAPI.js b/app/assets/javascripts/orbitdesktopAPI.js
index a6de0df6..83e0af39 100644
--- a/app/assets/javascripts/orbitdesktopAPI.js
+++ b/app/assets/javascripts/orbitdesktopAPI.js
@@ -55,5 +55,12 @@ var orbitDesktopAPI = function(){
 	       var A = key(a), B = key(b);
 	       return ((A < B) ? -1 : (A > B) ? +1 : 0) * [-1,1][+!!reverse];                  
 	   }
-	}
+	};
+	this.rgb2hex = function(rgb) {
+	    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+	    var hex = function(x) {
+	        return ("0" + parseInt(x).toString(16)).slice(-2);
+	    }
+	    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+	};
 };
diff --git a/app/views/desktop/settings/themes.html.erb b/app/views/desktop/settings/themes.html.erb
index 375ca463..9be87d27 100644
--- a/app/views/desktop/settings/themes.html.erb
+++ b/app/views/desktop/settings/themes.html.erb
@@ -52,7 +52,7 @@
 								<input type="hidden" class="color-picker black" value="#ffffff" for="thmtxt">
 							</td>
 							<td>
-								<input type="hidden" class="color-picker black" value="#000000" for="thmbgc">
+								<input type="hidden" class="color-picker black" value="#000000" for="background">
 							</td>
 						</tr>
 					</table>