diff --git a/file/js/jCounter.jQuery.coffee b/file/js/jCounter.jQuery.coffee
index 5eee1cf..6927f83 100644
--- a/file/js/jCounter.jQuery.coffee
+++ b/file/js/jCounter.jQuery.coffee
@@ -12,33 +12,29 @@
 			max: 0
 			counterClass: 'jCounter'
 			countUp: false
-			cssFile: 'wcf/style/jCounter.css'
 			width: '100%'
 		, options
 		
-		if this.attr('maxlength')
-			max = this.attr('maxlength')
+		if @.attr('maxlength')
+			max = @.attr('maxlength')
 		else max = options.max
-		
-		if $('#jCounterCSS').length == 0
-			$('head').append('<link id="jCounterCSS" rel="stylesheet" type="text/css" href="' + options.cssFile + '" >')
 
 		if !container
-			if !this.hasClass('jCounterInput')
-				this.addClass('jCounterInput')
-			this.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
-			jCounterContainer = $(this).parent().children('.' + options.counterClass)
+			if !@.hasClass('jCounterInput')
+				@.addClass('jCounterInput')
+			@.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
+			jCounterContainer = $(@).parent().children('.' + options.counterClass)
 		else
 			if typeof container is 'object'
 				jCounterContainer = container
 			else
 				jCounterContainer = $ container
-		
-		this.on 'keypress keyup', $.proxy () ->
+
+		@.on 'keypress keyup', $.proxy () ->
 			if options.countUp
-				length = this.val().length
+				length = @.val().length
 			else
-				length = max - this.val().length
+				length = max - @.val().length
 			
 			if options.countUp && max > 0
 				if length < max / 2
@@ -58,5 +54,5 @@
 					color = 3
 			
 			jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color)
-		, this
+		, @
 )(jQuery)
\ No newline at end of file
diff --git a/file/style/be.bastelstu.wcf.chat.scss b/file/style/be.bastelstu.wcf.chat.less
similarity index 64%
rename from file/style/be.bastelstu.wcf.chat.scss
rename to file/style/be.bastelstu.wcf.chat.less
index a1a0d2e..8af6f8b 100644
--- a/file/style/be.bastelstu.wcf.chat.scss
+++ b/file/style/be.bastelstu.wcf.chat.less
@@ -27,10 +27,9 @@ .sidebar {
 	ul {
 		li {
 			a {
-				color: #6699CC;
+				color: @wcfLinkColor;
 				display: block;
 				padding: 5px 25px 7px 35px;
-				text-shadow: 0 1px 0 #FFFFFF;
 			}
 		}
 	}
@@ -57,8 +56,7 @@ #smilies {
 			margin: 5px 5px 0 0;
 			
 			.icon24 {
-				//width: 16px;
-				//height: 16px;
+				//.square(16px);
 			}
 		}
 	}
@@ -78,7 +76,7 @@ #timsChatInput {
 
 #timsChatControls {
 	position: relative;
-	border-radius: 5px 5px 0 5px;
+	.borderRadius(5px, 5px, 0, 5px);
 }
 
 #timsChatOptions {
@@ -95,7 +93,7 @@ #timsChatOptions {
 		> li {
 			> a {
 				&.button {
-					border-radius: 0 0 0 0;
+					.borderRadius(0);
 					margin: 0;
 					padding-right: 7px;
 				}
@@ -125,18 +123,18 @@ #timsChatUserList {
 		background-color: rgba(0, 0, 0, 0.1);
 		margin-bottom: -5px;
 		padding: 1px 0 6px;
-		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset;
-		border-bottom: 1px solid #FFFFFF;
+		.boxShadowNative(0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset);
+		border-bottom: 1px solid @wcfContentBackgroundColor;
 		color: rgba(0, 0, 0, 0.4);
-		text-shadow: none;
-		
+				
 		> li {
 			a {
 				background-color: rgba(255, 255, 255, 0.22);
-				border-radius: 5px 0 0 5px;
+				.textShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.1) + rgba(255, 255, 255, 0.22)) !important;
+				.borderRadius(5px, 0, 0, 5px);
 				margin-left: 35px;
 				padding: 1px 0 1px 15px;
-				color: #555;
+				color: @wcfColor;
 			}
 		}
 	}
@@ -169,18 +167,16 @@ .timsChatMessage {
 }
 
 .ajaxLoad {
-	background: {
-		position: right center;
-		repeat: no-repeat;
-		size: auto 100%;
-	}
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-size: auto 100%;
 }
 
 .timsChatSidebarTabs {
 	height: 34px;
 	z-index: 131;
 	position: relative;
-	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+	.boxShadowNative(0 0 5px 0 rgba(0, 0, 0, 0.1));
 	
 	.left & {
 		margin-right: 1px;
@@ -200,13 +196,12 @@ .timsChatSidebarTabs {
 			text-align: center;
 			
 			a {
-				color: rgba(0, 0, 0, 0.4);
-				text-shadow: none;
+				color: fade(@wcfColor, 80%);
+				.textShadow(@wcfContentBackgroundColor);
 				height: 22px;
 				padding: 9px 0 0;
 				
-				-moz-transition-property: border-radius, background-color, font-size; -moz-transition-duration: .2s; 
-				-webkit-transition-property: border-radius, background-color, font-size; -webkit-transition-duration: .2s; 
+				.transition(~"border-radius .2s linear 0s, background-color .2s linear 0s, font-size", .2s);
 				
 				.collapsed & {
 					border: none !important;
@@ -214,10 +209,10 @@ .timsChatSidebarTabs {
 			}
 			
 			&.active a {
-				background-color: #FFFFFF;
-				border-bottom: 1px solid #BBCCDD;
-				border-radius: 0 0 7px 7px;
-				color: #000000;
+				background-color: @wcfContentBackgroundColor;
+				border-bottom: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
+				.borderRadius(0, 7px);
+				color: @wcfColor;
 				font-size: 130%;
 				font-weight: bold;
 				
@@ -226,8 +221,8 @@ .timsChatSidebarTabs {
 			}
 					
 			&:first-child.active a {
-				border-radius: 0 0 7px 0;
-				border-right: 1px solid #BBCCDD;
+				.borderRadius(0, 0, 7px, 0);
+				border-right: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
 				
 				.right & {
 					margin-left: -1px;
@@ -235,8 +230,8 @@ .timsChatSidebarTabs {
 			}
 			
 			&:last-child.active a {
-				border-radius: 0 0 0 7px;
-				border-left: 1px solid #BBCCDD;
+				.borderRadius(0, 0, 0, 7px);
+				border-left: 1px solid darken(@wcfSidebarBackgroundColor, 6%);
 				
 				.left & {
 					margin-right: -1px;
@@ -244,20 +239,17 @@ .timsChatSidebarTabs {
 			}
 			
 			& .badge {
+				.badgeBG(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
+				.badgeShadow(@wcfSidebarBackgroundColor + rgba(0, 0, 0, 0.2));
 				position: relative;
 				top: -1px;
+				color: #fff;
 			}
 			
 			&.active .badge {
 				font-size: 65% !important;
-				color: #fff;
-				background-color: #369;
-				
-				-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-				-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-				-ms-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-				-o-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-				box-shadow: 0 0 1px rgba(255, 255, 255, 1);
+				.badgeBG(@wcfContentBackgroundColor);
+				.badgeShadow(@wcfContentBackgroundColor);
 			}
 		}
 	}
@@ -275,7 +267,7 @@ #sidebarContainer {
 	overflow-y: auto;
 	height: 420px;
 	width: 100%;
-	border-top: 1px solid #B8D3ED;
+	border-top: 1px solid darken(@wcfSidebarBackgroundColor, 8%);
 	z-index: 131;
 	position: relative;
 }
@@ -288,6 +280,7 @@ #sidebarContainer a {
 #timsChatCopyright {
 	bottom: 5px;
 	position: absolute;
+	.textShadow(@wcfContentBackgroundColor);
 }
 
 .sidebarContent {
@@ -300,20 +293,20 @@ .sidebarContent {
 				box-shadow: none !important;
 				
 				> a {
-					background-color: rgba(255, 255, 255, 0.3);
-					-moz-transition-property: background-color; -moz-transition-duration: .2s;
-					-webkit-transition-property: background-color; -webkit-transition-duration: .2s;
+					background-color: fade(@wcfContentBackgroundColor, 33.33%);
+					.textShadow(fade(@wcfContentBackgroundColor, 33.33%));
+					.transition(background-color, .2s);
 					
 					&:hover {
-						background-color: rgb(255, 255, 255);
+						background-color: @wcfContentBackgroundColor;
 					}
 				}
 			}
 			
 			> li.activeMenuItem {
 				> a {
-					background-color: #FFFFFF !important;
-					box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+					background-color: @wcfContentBackgroundColor !important;
+					.boxShadowNative(0 0 5px rgba(0, 0, 0, 0.1));
 				}
 			}
 		}
@@ -342,4 +335,16 @@ html.fullscreen {
 			}
 		}
 	}
-}
\ No newline at end of file
+}
+
+.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 50%) {
+	background-color: lighten(@backgroundColor, lightness(@backgroundColor) / 2);
+}
+
+.badgeBG(@backgroundColor) when (lightness(@backgroundColor) < 20%) {
+	background-color: lighten(@backgroundColor, 20%);
+}
+
+.badgeBG(@backgroundColor) when (lightness(@backgroundColor) >= 50%) {
+	background-color: darken(@backgroundColor, lightness(@backgroundColor) / 2);
+}
diff --git a/file/style/jCounter.less b/file/style/jCounter.less
new file mode 100644
index 0000000..542a886
--- /dev/null
+++ b/file/style/jCounter.less
@@ -0,0 +1,77 @@
+.jCounterContainer {
+	display: table;
+	
+	> div {
+		display: table-row;
+	}
+}
+
+.jCounterInput {
+	height: 16px;
+	width: 100%;
+	position: relative;
+	z-index: 9999;
+	box-sizing: content-box !important;
+	.boxShadowInset(0, 1px, rgba(0, 0, 0, .1));
+	.transition(~"border .2s linear 0, box-shadow", .2s);
+	
+	&:hover + .jCounter, &:focus + .jCounter {
+		border-color: @wcfInputHoverBorderColor;
+	}
+	
+	&:focus + .jCounter {
+		.boxShadowNative(~"0 0 5px" fade(@wcfInputHoverBorderColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+	}
+	
+	.formError & + .jCounter {
+		border-color: @wcfErrorBackgroundColor;
+		.boxShadowNative(~"0 0 5px" fade(@wcfErrorBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+	}
+	
+	.formSuccess & + .jCounter {
+		border-color: @wcfSuccessBackgroundColor;	
+		.boxShadowNative(~"0 0 5px" fade(@wcfSuccessBackgroundColor, 50%) ~", inset 0 1px 5px rgba(0, 0, 0, .1)");
+	}
+}
+
+.jCounterInput, .jCounter {
+	display: table-cell;
+}
+
+.jCounter {
+	@backgroundColor: darken(@wcfInputBackgroundColor, 15%);
+	.textShadow(darken(@wcfInputBackgroundColor, 15%));
+	text-align: center;
+	vertical-align: middle;
+	background-color: @backgroundColor;
+	padding: 0 5px 0 10px;
+	position: relative;
+	z-index: 0 !important;
+	.borderRadius(0px, 5px, 5px, 0px);
+	border-color: darken(@wcfInputBorderColor, 20%) @wcfInputBorderColor lighten(@wcfInputBorderColor, 10%);
+	border-style: solid;
+	border-width: 1px;
+	width: 30px;
+	
+	.adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) >= 40%) {
+		color: darken(@color, 8%);
+		content: "darken";
+	}
+	
+	.adapt(@backgroundColor, @color) when (lightness(@backgroundColor) - lightness(@color) < 40%) {
+		color: lighten(@color, 8%);
+		content: "lighten";
+	}
+	
+	&.color-1 {
+		.adapt(@backgroundColor, mix(@wcfInputColor, #666, 50%));
+	}
+	
+	&.color-2 {
+		.adapt(@backgroundColor, mix(@wcfInputColor, #EECC22, 70%));
+	}
+	
+	&.color-3 {
+		.adapt(@backgroundColor, mix(@wcfInputColor, #D40D12, 30%));
+	}
+}
diff --git a/file/style/jCounter.scss b/file/style/jCounter.scss
deleted file mode 100644
index f685e53..0000000
--- a/file/style/jCounter.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.jCounterContainer {
-	display: table;
-	
-	> div {
-		display: table-row;
-	}
-}
-
-.jCounterInput {
-	height: 16px;
-	width: 100%;
-	position: relative;
-	z-index: 9999;
-	box-sizing: content-box !important;
-}
-
-.jCounterInput, .jCounter {
-	display: table-cell;
-}
-
-.jCounter {
-	text-align: center;
-	background-color: rgba(0, 0, 0, 0.7);
-	padding: 0 5px 0 10px;
-	position: relative;
-	z-index: 0 !important;
-	border-radius: 0px 5px 5px 0px;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-	width: 30px;
-	
-	&.color-1 {
-		color: #FFFFFF;
-	}
-	
-	&.color-2 {
-		color: rgba(255,255,255,0.5);
-	}
-	
-	&.color-3 {
-		color: #D40D12;
-	}
-}
diff --git a/template/chat.tpl b/template/chat.tpl
index 736fe1d..bad0d87 100644
--- a/template/chat.tpl
+++ b/template/chat.tpl
@@ -5,7 +5,6 @@
 	
 	{include file='headInclude' sandbox=false}
 	<style type="text/css">
-		@import url("{@$__wcf->getPath('wcf')}style/be.bastelstu.wcf.chat.css");
 		#timsChatCopyrightDialog {
 			background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}");
 			background-position: right 45px;