Use a dark editor surround if the theme is dark

services/web/app/views/project/editor.jade

@@ -7,7 +7,7 @@ block vars
 	- var suppressSystemMessages = true
 
 block content
-	.editor(ng-controller="IdeController")
+	.editor(ng-controller="IdeController", ng-class="{'editor-dark': darkTheme}").full-size
 		.loading-screen(ng-show="state.loading")
 			.container
 				h3 Loading...

services/web/app/views/project/editor/file-tree.jade

@@ -1,4 +1,4 @@
-aside#file-tree(ng-controller="FileTreeController")
+aside#file-tree(ng-controller="FileTreeController").full-size
 	.toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
 		a(
 			href,

services/web/public/coffee/ide.coffee

@@ -89,6 +89,21 @@ define [
 					We don't want to delete your data on ShareLaTeX, so this project still contains your history and collaborators.
 					If the project has been renamed please look in your project list for a new project under the new name.
 				""")
+				
+		DARK_THEMES = [
+			"ambiance", "chaos", "clouds_midnight", "cobalt", "idle_fingers",
+			"merbivore", "merbivore_soft", "mono_industrial", "monokai",
+			"pastel_on_dark", "solarized_dark", "terminal", "tomorrow_night",
+			"tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties",
+			"twilight", "vibrant_ink"
+		]
+		$scope.darkTheme = false
+		$scope.$watch "settings.theme", (theme) ->
+			if theme in DARK_THEMES
+				$scope.darkTheme = true
+			else
+				$scope.darkTheme = false
+			
 	]
 
 	angular.bootstrap(document.body, ["SharelatexApp"])

services/web/public/stylesheets/app/editor.less

@@ -207,3 +207,24 @@
 	position: fixed;
 	z-index: 100;
 }
+
+.editor-dark {
+	color: @gray-lighter;
+	background-color: @editor-dark-background-color;
+	
+	.ui-layout-resizer {
+		background-color: darken(@editor-dark-background-color, 10%);
+		border: none;
+	}
+	
+	.btn-default {
+		color: white;
+		background-color: @gray;
+		border-color: darken(@gray-dark, 10%);
+		&:hover {
+			background-color: darken(@gray, 5%);
+			border-color: darken(@gray-dark, 20%);
+			
+		}
+	}
+}

services/web/public/stylesheets/app/editor/chat.less

@@ -126,4 +126,13 @@
 			padding: @line-height-computed / 4;
 		}
 	}
+}
+
+.editor-dark {
+	.chat {
+		.new-message {
+			background-color: lighten(@editor-dark-background-color, 10%);
+			border-color: @editor-dark-toolbar-border-color;
+		}
+	}
 }

services/web/public/stylesheets/app/editor/file-tree.less

@@ -92,3 +92,35 @@ aside#file-tree {
 		background-color: @file-tree-droppable-background-color;
 	}
 }
+
+.editor-dark {
+	aside#file-tree {
+		// background-color: lighten(@editor-dark-background-color, 10%);
+		
+		ul.file-tree-list {
+			.dropdown-toggle {
+				color: @editor-dark-highlight-color;
+			}
+			
+			li {
+				.entity-name {
+					color: #aaaaaa;
+					&:hover {
+						background-color: black;
+					}
+				}
+				&.selected {
+					> .entity > .entity-name {
+						color: @editor-dark-highlight-color;
+						border-color: @editor-dark-highlight-color;
+						i.fa-folder-open, i.fa-folder, i.fa-file, i.fa-image, i.fa-file-pdf-o {
+							color: @editor-dark-highlight-color;
+						}
+					}
+				}
+			}
+		}
+	}
+	
+	
+}

services/web/public/stylesheets/app/editor/pdf.less

@@ -155,3 +155,24 @@
 		padding: 0 2px 0;
 	}
 }
+
+.editor-dark {
+	.pdf-logs {
+		background-color: lighten(@editor-dark-background-color, 10%);
+	}
+	.pdfjs-viewer {
+		background-color: lighten(@editor-dark-background-color, 10%);
+	}
+	.pdf .toolbar {
+		.toolbar-right a {
+			i {
+				border-color: @gray;
+			}
+			&:hover {
+				i {
+					border-color: @gray-light;
+				}
+			}
+		}
+	}
+}

services/web/public/stylesheets/app/editor/toolbar.less

@@ -104,3 +104,28 @@
 		background-color: #fafafa;
 	}
 }
+
+.editor-dark {
+	.toolbar-alt {
+		background-color: darken(@editor-dark-background-color, 0%);
+	}
+	.toolbar {
+		border-color: @editor-dark-toolbar-border-color;
+		.btn-full-height {
+			border-color: @editor-dark-toolbar-border-color;
+			&:hover {
+				background-color: black;
+				color: lighten(@link-color, 10%);
+			}
+		}
+		&.toolbar-header {
+			box-shadow: none;
+		}
+		a:not(.btn) {
+			color: @gray;
+			&:hover {
+				color: @gray-light;
+			}
+		}
+	}
+}

services/web/public/stylesheets/app/editor/track-changes.less

@@ -64,7 +64,6 @@
 		width: @changesListWidth;
 		position: absolute;
 		right: 0;
-		background-color: white;
 
 		.loading {
 			text-align: center;
@@ -266,3 +265,24 @@
 		}
 	}
 }
+
+.editor-dark {
+	#trackChanges {
+		aside.change-list {
+			border-color: @editor-dark-toolbar-border-color;
+			
+			ul li.change {
+				.day {
+					background-color: darken(@editor-dark-background-color, 10%);
+					border-bottom: 1px solid @editor-dark-toolbar-border-color;
+				}
+				.description {
+					border-bottom: 1px solid @editor-dark-toolbar-border-color;
+					&:hover {
+						background-color: black;
+					}
+				}
+			}
+		}
+	}
+}

services/web/public/stylesheets/core/variables.less

@@ -822,3 +822,7 @@
 
 @toolbar-border-color: @gray-lighter;
 @file-tree-droppable-background-color: rgb(252, 231, 199);
+
+@editor-dark-background-color: #333;
+@editor-dark-toolbar-border-color: #222;
+@editor-dark-highlight-color: #FFA03A;