diff --git a/pixelegg/hook_settings.inc.php b/pixelegg/hook_settings.inc.php
index cb19b1555b..46216e180a 100644
--- a/pixelegg/hook_settings.inc.php
+++ b/pixelegg/hook_settings.inc.php
@@ -31,26 +31,19 @@ if (!$hook_data['setup'])	// does not work on setup time
 }
 
 $colors = array(
-	'#4b89d8' => lang('dark blue'),
-	'#010101' => lang('black'),
-	'#a3620a' => lang('brown'),
-	'#469609' => lang('dark green'),
-	'#bbde62' => lang('light green'),
-	'#9541d6' => lang('lila'),
-	'#f7b21e' => lang('orange'),
-	'#fe6a07' => lang('dark orange'),
-	'#fedf9e' => lang('light orange'),
-	'#f06eaa' => lang('pink'),
-	'#ed1c24' => lang('red'),
-	'#fef322' => lang('yellow'),
+	'#408dd2' => lang('LightBlue'),
+	'#679fd2' => lang('DarkBlue'),
+	'#B0C4DE' => lang('LightSteelBlue'),
+	'#20B2AA' => lang('LightSeaGreen'),
+	'#84CA8C' => lang('DarkGreen'),
+	'#b4b4b4' => lang('Gray'),
 );
 asort($colors);
 $colors['custom'] = lang('Custom color');	// custom allways last
 $template_colors = array();
 foreach($colors as $color => $label)
 {
-	$template_colors[$color] = $label.' ('.$color.') '.lang('Sidebox and header');
-	$template_colors['@'.$color] = $label.' ('.$color.') '.lang('Sidebox and active tab');
+	$template_colors[$color] = $label.' ('.$color.') '.lang('Sidebox, header, and logo');
 }
 /**
  * Stylite Pixelegg template
@@ -91,7 +84,6 @@ $GLOBALS['settings'] = array(
 		'xmlrpc' => True,
 		'admin'  => False,
 	),
-	/* disabled until Pixelegg template supports it
 	'template_color' => array(
 		'type' => 'select',
 		'label' => 'Template color',
@@ -111,7 +103,7 @@ $GLOBALS['settings'] = array(
 		'help' => lang('Use eg. %1 or %2','#FF0000','orange'),
 		'xmlrpc' => True,
 		'admin'  => False,
-	),*/
+	),
 	'navbar_format' => false,	// not used in JDots (defined in common prefs)
 	'default_app' => false,		// not used in JDots, as we can have multiple tabs open ...
 );
diff --git a/pixelegg/inc/class.pixelegg_framework.inc.php b/pixelegg/inc/class.pixelegg_framework.inc.php
index 0498a85173..9793555879 100755
--- a/pixelegg/inc/class.pixelegg_framework.inc.php
+++ b/pixelegg/inc/class.pixelegg_framework.inc.php
@@ -61,7 +61,35 @@ class pixelegg_framework extends jdots_framework
 		}
 		return parent::header($extra);
 	}
+	
+	/**
+	 * Make given color lighter or darker by percentage
+	 *
+	 * @param string $color in hex
+	 * @param int $percent int
+	 * @return string returns color hex format (for instance: #2b2b2b)
+	 */
+	function _color_shader($color, $percent) {
 
+		$R = hexdec(substr($color,0,2));
+		$G = hexdec(substr($color,2,2));
+		$B = hexdec(substr($color,4,2));
+
+		$R = round($R * (100 + $percent) / 100);
+		$G = round($G * (100 + $percent) / 100);
+		$B = round($B * (100 + $percent) / 100);
+		
+		$R = ($R<255)?$R:255;
+		$G = ($G<255)?$G:255;
+		$B = ($B<255)?$B:255;
+
+		$RR = (strlen(dechex($R))==1?"0".dechex($R):dechex($R));
+		$GG = (strlen(dechex($G))==1?"0".dechex($G):dechex($G));
+		$BB = (strlen(dechex($B))==1?"0".dechex($B):dechex($B));
+
+		return '#'.$RR.$GG.$BB;
+	}
+	
 	/**
 	 * Overwrite to NOT add customizable colors from jDots
 	 *
@@ -70,7 +98,58 @@ class pixelegg_framework extends jdots_framework
 	 */
 	public function _get_css()
 	{
-		return egw_framework::_get_css();
+		if (html::$ua_mobile || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'mobile') return egw_framework::_get_css();
+		$ret = parent::_get_css();
+		// color to use
+		$color = str_replace('custom',$GLOBALS['egw_info']['user']['preferences']['common']['template_custom_color'],
+			$GLOBALS['egw_info']['user']['preferences']['common']['template_color']);
+		//The hex value of the color
+		$color_hex = ltrim($color, '#');
+		
+		// Create a drak variant of the color
+		$color_hex_dark = $this->_color_shader($color_hex, 15);
+		// Create a draker variant of the color
+		$color_hex_darker = $this->_color_shader($color_hex, -30);
+		
+		if (preg_match('/^(#[0-9A-F]+|[A-Z]+)$/i',$color))	// a little xss check
+		{
+			$ret['app_css'] = "
+/**
+ * theme changes to color pixelegg for color: $color
+ */
+
+/*
+-Top window framework header
+-sidebar actiuve category :hover
+-popup toolbar
+*/
+div#egw_fw_header, div.egw_fw_ui_category:hover,#loginMainDiv,#loginMainDiv #divAppIconBar #divLogo,
+#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active:hover,
+.dialogFooterToolbar, .ui-widget-header{
+	background-color: $color;
+}
+
+/*Login background*/
+#loginMainDiv #divAppIconBar #divLogo img[src$='svg'] {
+	background-image: -webkit-linear-gradient(top, $color, $color);
+}
+
+/*Center box in login page*/
+#loginMainDiv div#centerBox {
+	background-image: -webkit-linear-gradient(top,$color_hex_dark,$color_hex_darker);
+	border-top: solid 1px $color_hex_darker;
+	border-left: solid 1px $color_hex_darker;
+	border-right: solid 1px $color_hex_darker;
+	border-bottom: solid 1px $color_hex_dark;
+}
+
+/*Sidebar menu active category*/
+#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active{
+	background-color: $color_hex_darker;
+}
+";
+		}
+		return $ret;
 	}
 
 	/**