diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index c782384cb7..a03999cc37 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -31,11 +31,13 @@
 		right: 0;
 		bottom: @new-message-height;
 		overflow-x: hidden;
+		background-color: @chat-bg;
+
 		li.message {
 			margin: @line-height-computed / 2;
 			.date {
 				font-size: 12px;
-				color: @gray-light;
+				color: @chat-color;
 				border-bottom: 1px solid @gray-lightest;
 				margin-bottom: @line-height-computed / 2;
 				text-align: center;
@@ -63,8 +65,8 @@
 				.message {
 					border-left: 3px solid transparent;
 					font-size: 14px;
-					box-shadow: -1px 2px 3px #ddd;
-					border-raduis: @border-radius-base;
+					box-shadow: @chat-message-box-shadow;
+					border-radius: @chat-message-border-radius;
 					position: relative;
 					
 					.message-content {
@@ -124,7 +126,7 @@
 		.full-size;
 		top: auto;
 		height: @new-message-height;
-		background-color: @gray-lightest;
+		background-color: @chat-new-message-bg;
 		padding: @line-height-computed / 4;
 		border-top: 1px solid @editor-border-color;
 		textarea {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index ab3ef2ccc9..57833767be 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -925,6 +925,14 @@
 @editor-toggler-hover-bg-color    : #DDD;
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
+
+// Chat
+@chat-bg                          : transparent;
+@chat-color                       : @gray-light;
+@chat-new-message-bg              : @gray-lightest;
+@chat-message-box-shadow          : -1px 2px 3px #ddd;
+@chat-message-border-radius       : 0;
+
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 508ae6ed37..72281ad48c 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -196,6 +196,15 @@
 @editor-toggler-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;
+@editor-border-color              : @ol-blue-gray-5;
+
+// Chat
+@chat-bg                          : @ol-blue-gray-2;
+@chat-color                       : #FFF;
+@chat-new-message-bg              : @ol-blue-gray-3;
+@chat-message-box-shadow          : none;
+@chat-message-border-radius       : @border-radius-base;
+
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;
 @gray-dark:             #505050;