From 2ef1b4904dbb4fa2bd0bcf373c1b0033c5af68f5 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 9 Jul 2018 15:45:09 +0100
Subject: [PATCH 01/14] Bootstrap the light theme.

---
 services/web/Gruntfile.coffee                   | 17 +++++++++++++++--
 services/web/Makefile                           |  2 +-
 services/web/app/views/layout.pug               |  2 +-
 services/web/public/stylesheets/app/editor.less |  2 +-
 .../stylesheets/app/editor/file-tree.less       |  3 ++-
 .../public/stylesheets/app/editor/toolbar.less  |  4 ++--
 .../stylesheets/core/_common-variables.less     |  1 +
 .../public/stylesheets/core/ol-variables.less   |  3 +++
 8 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee
index 4104352e3d..0cfdee9e51 100644
--- a/services/web/Gruntfile.coffee
+++ b/services/web/Gruntfile.coffee
@@ -35,6 +35,8 @@ module.exports = (grunt) ->
 				command:"node_modules/clean-css/bin/cleancss --s0 --source-map -o public/stylesheets/style.css public/stylesheets/style.css"
 			cssmin_ol:
 				command:"node_modules/clean-css/bin/cleancss --s0 --source-map -o public/stylesheets/ol-style.css public/stylesheets/ol-style.css"
+			cssmin_ol_light:
+				command:"node_modules/clean-css/bin/cleancss --s0 --source-map -o public/stylesheets/ol-light-style.css public/stylesheets/ol-light-style.css"
 
 		forever:
 			app:
@@ -168,6 +170,17 @@ module.exports = (grunt) ->
 				files:
 					"public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less"
 
+			'ol-light':
+				options:
+					sourceMap: true
+					sourceMapFilename: "public/stylesheets/ol-light-style.css.map"
+					sourceMapBasepath: "public/stylesheets"
+					globalVars:
+						'is-overleaf': true
+						'show-rich-text': Settings.showRichText
+				files:
+					"public/stylesheets/ol-light-style.css": "public/stylesheets/ol-light-style.less"
+
 		postcss:
 			options:
 				map: 
@@ -178,7 +191,7 @@ module.exports = (grunt) ->
 					require('autoprefixer')({browsers: [ 'last 2 versions', 'ie >= 10' ]})
 				]
 			dist:
-				src: [ "public/stylesheets/style.css", "public/stylesheets/ol-style.css" ]
+				src: [ "public/stylesheets/style.css", "public/stylesheets/ol-style.css", "public/stylesheets/ol-light-style.css" ]
 
 		env:
 			run:
@@ -413,7 +426,7 @@ module.exports = (grunt) ->
 	grunt.registerTask 'compile:server', 'Compile the server side coffee script', ['clean:app', 'coffee:app', 'coffee:app_dir', 'compile:modules:server']
 	grunt.registerTask 'compile:client', 'Compile the client side coffee script', ['coffee:client', 'coffee:sharejs', 'wrap_sharejs', "compile:modules:client", 'compile:modules:inject_clientside_includes']
 	grunt.registerTask 'compile:css', 'Compile the less files to css', ['less', 'postcss:dist']
-	grunt.registerTask 'compile:minify', 'Concat and minify the client side js and css', ['requirejs', "file_append", "exec:cssmin_sl", "exec:cssmin_ol"]
+	grunt.registerTask 'compile:minify', 'Concat and minify the client side js and css', ['requirejs', "file_append", "exec:cssmin_sl", "exec:cssmin_ol", "exec:cssmin_ol_light"]
 	grunt.registerTask 'compile:unit_tests', 'Compile the unit tests', ['clean:unit_tests', 'coffee:unit_tests']
 	grunt.registerTask 'compile:acceptance_tests', 'Compile the acceptance tests', ['clean:acceptance_tests', 'coffee:acceptance_tests']
 	grunt.registerTask 'compile:smoke_tests', 'Compile the smoke tests', ['coffee:smoke_tests']
diff --git a/services/web/Makefile b/services/web/Makefile
index 26534b8612..169031be07 100644
--- a/services/web/Makefile
+++ b/services/web/Makefile
@@ -24,7 +24,7 @@ SHAREJS_COFFEE_FILES := \
 	public/coffee/ide/editor/sharejs/vendor/client/ace.coffee \
 	public/coffee/ide/editor/sharejs/vendor/client/cm.coffee
 LESS_FILES := $(shell find public/stylesheets -name '*.less')
-CSS_FILES := public/stylesheets/style.css public/stylesheets/ol-style.css
+CSS_FILES := public/stylesheets/style.css public/stylesheets/ol-style.css public/stylesheets/ol-light-style.css
 
 # The automatic variable $(@D) is the target directory name
 app.js: app.coffee
diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 9e633667eb..5999de931b 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -21,7 +21,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 		link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + "style.css", {hashedPath:true}))
+		link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + settings.themeModifier + "style.css", {hashedPath:true}))
 
 		block _headLinks
 
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 42c6c15daf..597db09f74 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -33,7 +33,7 @@
 .editor-menu-icon when (@is-overleaf = true) {
 	&.fa {
 		width: 1em;
-		background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
+		background: @editor-header-logo-background;
 		
 		&::before {
 			// Disable the font-awesome icon when in Overleaf by replacing it with a
diff --git a/services/web/public/stylesheets/app/editor/file-tree.less b/services/web/public/stylesheets/app/editor/file-tree.less
index 845cc74a93..95bc0d38bf 100644
--- a/services/web/public/stylesheets/app/editor/file-tree.less
+++ b/services/web/public/stylesheets/app/editor/file-tree.less
@@ -201,10 +201,11 @@
 
 			> .entity when (@is-overleaf = true) {
 				> .entity-name {
+					color: @file-tree-item-selected-color;
 					> div > i.fa,
 					> i.fa,
 					.entity-menu-toggle i.fa {
-						color: #FFF;
+						color: @file-tree-item-selected-color;
 					}
 					> i.fa i.linked-file-highlight {
 						color: @blue;
diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 4006b56a7b..a65cc9094b 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -58,7 +58,7 @@
 	.btn-full-height {
 		border: none;
 		border-radius: 0;
-		border-right: 1px solid @toolbar-border-color;
+		border-right: 1px solid @toolbar-header-btn-border-color;
 		color: @toolbar-btn-color;
 		padding: 3px 10px 5px;
 		font-size: 20px;
@@ -96,7 +96,7 @@
 		justify-content: flex-end;
 		.btn-full-height {
 			border-right: 0;
-			border-left: 1px solid @toolbar-border-color;
+			border-left: 1px solid @toolbar-header-btn-border-color;
 		}
 	}
 
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 8dc3294a15..431aaff7a4 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -793,6 +793,7 @@
 @left-menu-animation-duration: 0.35s;
 
 @toolbar-border-color: @gray-lighter;
+@toolbar-header-btn-border-color: @toolbar-border-color;
 @common-border-color: @gray-lighter;
 @editor-border-color: @gray-lighter;
 @file-tree-droppable-bg-color: rgb(252, 231, 199);
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 9f4eb29c95..89acff5a36 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -202,6 +202,7 @@
 @toolbar-btn-active-bg-color      : @ol-green;
 @toolbar-btn-active-shadow        : none;
 @toolbar-border-color             : @ol-blue-gray-5;
+@toolbar-header-btn-border-color  : @toolbar-border-color;
 @toolbar-alt-bg-color             : @ol-blue-gray-5;
 @toolbar-icon-btn-color           : #FFF;
 @toolbar-icon-btn-hover-color     : #FFF;
@@ -218,6 +219,7 @@
 @file-tree-bg                   : @ol-blue-gray-4;
 @file-tree-line-height          : 2.05;
 @file-tree-item-color           : #FFF;
+@file-tree-item-selected-color  : @file-tree-item-color;
 @file-tree-item-input-color     : @ol-blue-gray-5;
 @file-tree-item-toggle-color    : @ol-blue-gray-2;
 @file-tree-item-icon-color      : @ol-blue-gray-2;
@@ -314,6 +316,7 @@
 @brand-warning:         @orange;
 @brand-danger:          @ol-red;
 
+@editor-header-logo-background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
 @editor-loading-logo-padding-top: 115.44%;
 @editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg);
 @editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg);
\ No newline at end of file

From 418d7d515ae00b06184b84352d784ca9c1c19ebc Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 10 Jul 2018 13:14:58 +0100
Subject: [PATCH 02/14] Add light theme root file; add light theme variables
 file.

---
 .../public/stylesheets/app/project-list.less  |  4 +-
 .../stylesheets/core/_common-variables.less   |  1 +
 .../stylesheets/core/ol-light-variables.less  | 68 +++++++++++++++++++
 .../public/stylesheets/core/ol-variables.less |  1 +
 .../public/stylesheets/ol-light-style.less    |  2 +
 5 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 services/web/public/stylesheets/core/ol-light-variables.less
 create mode 100644 services/web/public/stylesheets/ol-light-style.less

diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index a1a0dd9cd6..d97ae3d264 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -170,9 +170,9 @@ ul.folders-menu {
 		> a {
 			background-color: @sidebar-active-bg;
 			font-weight: 700;
-			color: white;
+			color: @sidebar-active-color;
 			.subdued {
-				color: white;
+				color: @sidebar-active-color;
 			}
 		}
 	}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 431aaff7a4..32c8767aaa 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -857,6 +857,7 @@
 @sidebar-link-color            : #333;
 @sidebar-active-border-radius  : @border-radius-small;
 @sidebar-active-bg             : @link-color;
+@sidebar-active-color          : #FFF;
 @sidebar-hover-bg              : transparent;
 @sidebar-hover-text-decoration : underline;
 
diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less
new file mode 100644
index 0000000000..3df92f8761
--- /dev/null
+++ b/services/web/public/stylesheets/core/ol-light-variables.less
@@ -0,0 +1,68 @@
+// Styleguide colors
+@ol-blue-gray-0 : lighten(#E4E8EE, 6%);
+@ol-blue-gray-1 : lighten(#E4E8EE, 1%);
+@ol-blue-gray-2 : #9DA7B7;
+@ol-blue-gray-3 : #5D6879;
+@ol-blue-gray-4 : #455265;
+@ol-blue-gray-5 : #2C3645;
+@ol-blue-gray-6 : #1E2530;
+
+@ol-green       : #4F9C45;
+@ol-dark-green  : #1C5B26;
+@ol-blue        : #4B7FD1;
+@ol-dark-blue   : #2857A1;
+@ol-red         : #C9453E;
+@ol-dark-red    : #A6312B;
+
+@ol-type-color  : @ol-blue-gray-3;
+
+// Sidebar
+@sidebar-bg                     : @ol-blue-gray-0;
+@sidebar-color                  : @ol-blue-gray-3;
+@sidebar-link-color             : @ol-blue-gray-4;
+@sidebar-active-border-radius   : 0;
+@sidebar-active-bg              : @ol-blue-gray-1;
+@sidebar-active-color           : @ol-blue-gray-4;
+@sidebar-hover-bg               : @ol-blue-gray-1;
+@sidebar-hover-text-decoration  : none;
+@v2-dash-pane-bg                : @ol-blue-gray-4;
+@v2-dash-pane-link-color        : #FFF;
+@v2-dash-pane-btn-bg            : @ol-blue-gray-5;
+@v2-dash-pane-btn-hover-bg      : @ol-blue-gray-6;
+
+// Editor file-tree
+@file-tree-bg                    : @ol-blue-gray-1;
+@file-tree-line-height           : 2.05;
+@file-tree-item-color            : @ol-blue-gray-3;
+@file-tree-item-selected-color   : #FFF;
+@file-tree-item-input-color      : @ol-blue-gray-3;
+@file-tree-item-toggle-color     : @ol-blue-gray-3;
+@file-tree-item-icon-color       : @ol-blue-gray-3;
+@file-tree-item-folder-color     : @ol-blue-gray-3;
+@file-tree-item-hover-bg         : @ol-blue-gray-1;
+@file-tree-item-selected-bg      : @ol-green;
+@file-tree-multiselect-bg        : @ol-blue;
+@file-tree-multiselect-hover-bg  : @ol-dark-blue;
+@file-tree-droppable-bg-color    : tint(@ol-green, 5%);
+
+@content-alt-bg-color            : @ol-blue-gray-1;
+
+// Editor resizers
+@editor-resizer-bg-color         : darken(@ol-blue-gray-1, 5%);
+@editor-resizer-bg-color-dragging: darken(@ol-blue-gray-1, 5%);
+@editor-toggler-bg-color         : darken(@ol-blue-gray-1, 15%);
+@editor-toggler-hover-bg-color   : @ol-green;
+@synctex-controls-z-index        : 6;
+@synctex-controls-padding        : 0;
+@editor-border-color             : @ol-blue-gray-5;
+
+@toolbar-border-color            : darken(@ol-blue-gray-1, 5%);
+@toolbar-alt-bg-color            : darken(@ol-blue-gray-1, 5%);
+@navbar-default-bg               : @ol-blue-gray-4;
+@toolbar-header-bg-color         : @ol-blue-gray-4;
+@toolbar-header-btn-border-color : @ol-blue-gray-3;
+@toolbar-btn-color               : #FFF;
+@toolbar-icon-btn-color          : @ol-blue-gray-3;
+@toolbar-icon-btn-hover-color    : @ol-blue-gray-3;
+@editor-header-logo-background   : url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
+@pdf-bg                          : @ol-blue-gray-0;
\ No newline at end of file
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 89acff5a36..27f1c74008 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -140,6 +140,7 @@
 @sidebar-link-color             : #FFF;
 @sidebar-active-border-radius   : 0;
 @sidebar-active-bg              : @ol-blue-gray-6;
+@sidebar-active-color           : #FFF;
 @sidebar-hover-bg               : @ol-blue-gray-4;
 @sidebar-hover-text-decoration  : none;
 @v2-dash-pane-bg                : @ol-blue-gray-4;
diff --git a/services/web/public/stylesheets/ol-light-style.less b/services/web/public/stylesheets/ol-light-style.less
new file mode 100644
index 0000000000..14fc37b602
--- /dev/null
+++ b/services/web/public/stylesheets/ol-light-style.less
@@ -0,0 +1,2 @@
+@import "ol-style.less";
+@import "core/ol-light-variables.less";

From 128c825bbf43506445dcae8265069c7368db6527 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 24 Aug 2018 12:05:37 +0100
Subject: [PATCH 03/14] Create flag for light theme.

---
 services/web/Gruntfile.coffee | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee
index 0cfdee9e51..5e71b83f7a 100644
--- a/services/web/Gruntfile.coffee
+++ b/services/web/Gruntfile.coffee
@@ -156,6 +156,7 @@ module.exports = (grunt) ->
 					sourceMapBasepath: "public/stylesheets"
 					globalVars:
 						'is-overleaf': false
+						'is-overleaf-light': false
 						'show-rich-text': Settings.showRichText
 				files:
 					"public/stylesheets/style.css": "public/stylesheets/style.less"
@@ -166,6 +167,7 @@ module.exports = (grunt) ->
 					sourceMapBasepath: "public/stylesheets"
 					globalVars:
 						'is-overleaf': true
+						'is-overleaf-light': false
 						'show-rich-text': Settings.showRichText
 				files:
 					"public/stylesheets/ol-style.css": "public/stylesheets/ol-style.less"
@@ -177,6 +179,7 @@ module.exports = (grunt) ->
 					sourceMapBasepath: "public/stylesheets"
 					globalVars:
 						'is-overleaf': true
+						'is-overleaf-light': true
 						'show-rich-text': Settings.showRichText
 				files:
 					"public/stylesheets/ol-light-style.css": "public/stylesheets/ol-light-style.less"

From 7c95de29cd2cc0a35c1794114a33d02984262ab2 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 24 Aug 2018 12:06:26 +0100
Subject: [PATCH 04/14] Avoid breaking the page if  isnt set.

---
 services/web/app/views/layout.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 683e2c8f0b..129e30a4a0 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -21,7 +21,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 		link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + settings.themeModifier + "style.css", {hashedPath:true}))
+		link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + (settings.themeModifier != null ? settings.themeModifier : "") + "style.css", {hashedPath:true}))
 
 		block _headLinks
 

From d5272498336fc116463293f214d660d35c30d931 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 24 Aug 2018 12:06:56 +0100
Subject: [PATCH 05/14] Style the editor.

---
 .../public/stylesheets/app/editor/pdf.less    |  6 ++-
 .../stylesheets/core/ol-light-variables.less  | 47 ++++++++++++-------
 .../public/stylesheets/core/ol-variables.less |  2 +-
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/pdf.less b/services/web/public/stylesheets/app/editor/pdf.less
index af597933ea..d2fc813577 100644
--- a/services/web/public/stylesheets/app/editor/pdf.less
+++ b/services/web/public/stylesheets/app/editor/pdf.less
@@ -7,7 +7,6 @@
 .pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
 	.toolbar-small-mixin;
 	.toolbar-alt-mixin;
-	border-bottom: 0;
 	padding-right: 5px;
 	&.uncompiled-changes {
 		#gradient > .striped(@color: rgba(255,255,255,.10), @angle: -45deg);
@@ -23,6 +22,11 @@
 	}
 }
 
+.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) and (@is-overleaf-light = false) {
+	border-bottom: 0;
+}
+
+
 .pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
 	.toolbar-tall-mixin;
 	padding: 0 (@line-height-computed / 2);
diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less
index 3df92f8761..3dffb3f005 100644
--- a/services/web/public/stylesheets/core/ol-light-variables.less
+++ b/services/web/public/stylesheets/core/ol-light-variables.less
@@ -1,8 +1,8 @@
 // Styleguide colors
-@ol-blue-gray-0 : lighten(#E4E8EE, 6%);
-@ol-blue-gray-1 : lighten(#E4E8EE, 1%);
+@ol-blue-gray-0 : #F4F5F8;
+@ol-blue-gray-1 : #DFE2E8;
 @ol-blue-gray-2 : #9DA7B7;
-@ol-blue-gray-3 : #5D6879;
+@ol-blue-gray-3 : #727E91;
 @ol-blue-gray-4 : #455265;
 @ol-blue-gray-5 : #2C3645;
 @ol-blue-gray-6 : #1E2530;
@@ -31,14 +31,14 @@
 @v2-dash-pane-btn-hover-bg      : @ol-blue-gray-6;
 
 // Editor file-tree
-@file-tree-bg                    : @ol-blue-gray-1;
+@file-tree-bg                    : #FFF;
 @file-tree-line-height           : 2.05;
 @file-tree-item-color            : @ol-blue-gray-3;
 @file-tree-item-selected-color   : #FFF;
-@file-tree-item-input-color      : @ol-blue-gray-3;
-@file-tree-item-toggle-color     : @ol-blue-gray-3;
-@file-tree-item-icon-color       : @ol-blue-gray-3;
-@file-tree-item-folder-color     : @ol-blue-gray-3;
+@file-tree-item-input-color      : @ol-blue-gray-2;
+@file-tree-item-toggle-color     : @ol-blue-gray-2;
+@file-tree-item-icon-color       : @ol-blue-gray-2;
+@file-tree-item-folder-color     : @ol-blue-gray-2;
 @file-tree-item-hover-bg         : @ol-blue-gray-1;
 @file-tree-item-selected-bg      : @ol-green;
 @file-tree-multiselect-bg        : @ol-blue;
@@ -48,21 +48,32 @@
 @content-alt-bg-color            : @ol-blue-gray-1;
 
 // Editor resizers
-@editor-resizer-bg-color         : darken(@ol-blue-gray-1, 5%);
-@editor-resizer-bg-color-dragging: darken(@ol-blue-gray-1, 5%);
-@editor-toggler-bg-color         : darken(@ol-blue-gray-1, 15%);
+@editor-resizer-bg-color         : @ol-blue-gray-1;
+@editor-resizer-bg-color-dragging: @ol-blue-gray-1;
+@editor-toggler-bg-color         : @ol-blue-gray-2;
 @editor-toggler-hover-bg-color   : @ol-green;
 @synctex-controls-z-index        : 6;
 @synctex-controls-padding        : 0;
 @editor-border-color             : @ol-blue-gray-5;
 
-@toolbar-border-color            : darken(@ol-blue-gray-1, 5%);
-@toolbar-alt-bg-color            : darken(@ol-blue-gray-1, 5%);
+
+@toolbar-border-color            : @ol-blue-gray-1;
+@toolbar-alt-bg-color            : #FFF;
+@editor-toolbar-bg               : @toolbar-alt-bg-color;
 @navbar-default-bg               : @ol-blue-gray-4;
-@toolbar-header-bg-color         : @ol-blue-gray-4;
-@toolbar-header-btn-border-color : @ol-blue-gray-3;
-@toolbar-btn-color               : #FFF;
+@toolbar-header-bg-color         : #FFF;
+@toolbar-header-btn-border-color : @ol-blue-gray-1;
+@toolbar-btn-color               : @ol-blue-gray-3;
+@toolbar-btn-hover-color         : @ol-blue-gray-3;
+@toolbar-btn-hover-bg-color      : @ol-blue-gray-0;
 @toolbar-icon-btn-color          : @ol-blue-gray-3;
 @toolbar-icon-btn-hover-color    : @ol-blue-gray-3;
-@editor-header-logo-background   : url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
-@pdf-bg                          : @ol-blue-gray-0;
\ No newline at end of file
+@editor-header-logo-background   : url(/img/ol-brand/overleaf-o.svg) center / contain no-repeat;
+@project-name-color              : @ol-blue-gray-3;
+@pdf-bg                          : @ol-blue-gray-0;
+
+// Formatting buttons
+@formatting-btn-color            : @toolbar-icon-btn-color;
+@formatting-btn-bg               : transparent;
+@formatting-btn-border           : @ol-blue-gray-1;
+@formatting-menu-bg              : transparent;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 15242024bb..6349d1887b 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -6,7 +6,7 @@
 @footer-height: 50px;
 
 // Styleguide colors
-@ol-blue-gray-0 : #f4f5f8;
+@ol-blue-gray-0 : #F4F5F8;
 @ol-blue-gray-1 : #E4E8EE;
 @ol-blue-gray-2 : #9DA7B7;
 @ol-blue-gray-3 : #5D6879;

From e88b840da7c3ed75fa46da604518a4e84c1e3739 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Fri, 24 Aug 2018 12:07:14 +0100
Subject: [PATCH 06/14] Update gitignore with the light theme generated CSS
 file.

---
 services/web/.gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/services/web/.gitignore b/services/web/.gitignore
index 26e9f30502..b8a57d9cd2 100644
--- a/services/web/.gitignore
+++ b/services/web/.gitignore
@@ -67,6 +67,7 @@ public/js/utils/
 
 public/stylesheets/style.css
 public/stylesheets/ol-style.css
+public/stylesheets/ol-light-style.css
 public/stylesheets/*.map
 public/brand/
 public/minjs/

From 2fbcaebac714a3779a9664a7340dbea171c2137b Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 27 Aug 2018 12:39:53 +0100
Subject: [PATCH 07/14] More adjustments; style the dashboard.

---
 .../components/affiliationForm.coffee         |  1 +
 services/web/public/img/ol-brand/overleaf.svg |  2 +-
 .../web/public/stylesheets/app/editor.less    |  1 +
 .../public/stylesheets/app/editor/chat.less   |  4 +-
 .../stylesheets/app/editor/history-v2.less    |  4 +-
 .../public/stylesheets/app/project-list.less  |  2 +-
 .../stylesheets/app/sidebar-v2-dash-pane.less |  6 +-
 .../public/stylesheets/components/navbar.less |  4 +-
 .../stylesheets/core/_common-variables.less   |  5 +-
 .../stylesheets/core/ol-light-variables.less  | 77 +++++++++++++++----
 .../public/stylesheets/core/ol-variables.less |  7 +-
 11 files changed, 85 insertions(+), 28 deletions(-)

diff --git a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
index 1c0c7d6229..abcdf50cd2 100644
--- a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
+++ b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
@@ -10,6 +10,7 @@ define [
 		_defaultDepartments = []
 
 		ctrl.addUniversityToSelection = (universityName) -> 
+			console.log universityName
 			{ name: universityName, isUserSuggested: true }
 		# Populates the countries dropdown
 		UserAffiliationsDataService
diff --git a/services/web/public/img/ol-brand/overleaf.svg b/services/web/public/img/ol-brand/overleaf.svg
index 73d2a9b4e0..a1ba347f3a 100644
--- a/services/web/public/img/ol-brand/overleaf.svg
+++ b/services/web/public/img/ol-brand/overleaf.svg
@@ -1 +1 @@
-<svg width="542" height="157" viewBox="0 0 542 157" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M299.24 156.94H.06V.28h299.18z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M197.05 110.3c.58 5.4 2.74 9.7 6.45 12.78 3.7 3.13 8.5 4.7 14.37 4.7 3.9 0 7.4-.83 10.53-2.46 3.12-1.66 5.6-3.94 7.4-6.9h18.85c-3.2 8.18-7.94 14.54-14.3 19.08-6.34 4.52-13.67 6.78-22 6.78-5.6 0-10.75-.98-15.46-2.96-4.7-1.98-9-4.9-12.7-8.78-3.6-3.68-6.3-7.94-8.3-12.8-2-4.83-3-9.8-3-14.9 0-5.24.9-10.15 2.7-14.77 1.8-4.63 4.4-8.78 7.9-12.46 3.8-4 8.1-7.1 13-9.3 4.8-2.2 9.7-3.3 14.9-3.3 6.5 0 12.6 1.5 18.2 4.4 5.6 3 10.4 7.2 14.4 12.5 2.4 3.3 4.2 6.9 5.3 10.9s1.74 8.6 1.74 13.8c0 .4 0 1-.08 1.9-.07.9-.1 1.5-.1 1.9h-60zm41.4-13.87c-1.48-5-4-8.8-7.53-11.43-3.52-2.6-7.97-3.92-13.33-3.92-4.7 0-8.8 1.42-12.5 4.24-3.7 2.82-6.2 6.52-7.5 11.1h40.8zm60.8-14c-6.8.54-11.52 2.33-14.2 5.34-2.68 3-4.03 8.4-4.03 16.23v38.3h-17.47V67.22h16.37v8.67c2.64-3.4 5.52-5.9 8.67-7.5 3.1-1.6 6.6-2.4 10.6-2.4v16.3zM135.2 5.18c-21.16-8.25-97.87-11.3-98 34.47C14.82 53.98 0 77.35 0 102.33 0 132.53 24.48 157 54.68 157s54.68-24.48 54.68-54.67c0-23.34-14.63-43.28-35.2-51.1C70.2 49.7 61.6 47 54.73 47.58c-9.8 6.23-21.75 19.04-27.4 31.8 8.4-10.08 21.53-14.48 33.16-12.6 17.1 2.77 30.2 17.63 30.2 35.54 0 19.9-16.2 36.02-36.1 36.02-11 0-20.8-4.9-27.4-12.62-9.7-11.42-12.2-23.8-10.2-35.9C23.9 47.4 74.2 23.27 111.6 14 99.4 20.46 77.4 31.07 62 42.63c44.9 17.34 52.17-20.52 73.2-37.46zm18.2 137.12h-13.73l-28.52-75.08h18.62l17.47 49.9 18.03-49.9h18.14l-30 75.08z" fill="#4C4D41" mask="url(#b)"/><path d="M348.63 110.3c.58 5.4 2.75 9.7 6.45 12.78 3.7 3.13 8.5 4.7 14.38 4.7 3.9 0 7.4-.83 10.53-2.46 3.1-1.66 5.5-3.94 7.4-6.9h18.8c-3.2 8.18-8 14.54-14.3 19.08-6.4 4.52-13.7 6.78-22 6.78-5.6 0-10.8-.98-15.5-2.96-4.7-1.98-8.9-4.9-12.7-8.78-3.6-3.68-6.3-7.94-8.3-12.8-2-4.83-3-9.8-3-14.9 0-5.24.9-10.15 2.7-14.77 1.8-4.63 4.42-8.78 7.92-12.46 3.82-4 8.15-7.1 13-9.3 4.9-2.2 9.9-3.3 15-3.3 6.5 0 12.57 1.5 18.2 4.4 5.64 3 10.44 7.2 14.4 12.5 2.42 3.3 4.2 6.9 5.36 10.9s1.77 8.6 1.77 13.8c0 .4-.04 1-.08 1.9-.08.9-.1 1.5-.1 1.9h-60.1zm41.42-13.87c-1.5-5-4-8.8-7.55-11.43-3.52-2.6-7.96-3.92-13.32-3.92-4.66 0-8.8 1.42-12.5 4.24-3.7 2.82-6.16 6.52-7.44 11.1h40.8zm88.13 45.87v-9.22c-2.1 3.72-5.04 6.5-8.83 8.27-3.8 1.77-8.67 2.65-14.58 2.65-11.1 0-20.37-3.8-27.8-11.37-7.43-7.57-11.15-16.98-11.15-28.2 0-5.3.93-10.3 2.8-15.03 1.86-4.73 4.5-8.9 7.98-12.5 3.73-3.95 7.88-6.86 12.42-8.75 4.54-1.88 9.67-2.84 15.35-2.84 5.45 0 10.15 1 14.1 2.8 3.93 1.8 7.1 4.6 9.5 8.3v-9.1h17.07v75.1h-16.86zm-44.47-38.16c0 6.32 2.1 11.6 6.4 15.87 4.2 4.3 9.3 6.4 15.4 6.4 5.5 0 10.4-2.1 14.6-6.4 4.2-4.3 6.3-9.3 6.3-15 0-6.1-2.1-11.3-6.3-15.7-4.2-4.4-9.1-6.6-14.7-6.6-5.9 0-10.97 2.1-15.17 6.3-4.16 4.2-6.25 9.3-6.25 15.3zm108-36.92v15.56h-12.6v59.52h-16.9V82.78h-8.9V67.22h8.4v-2.05c0-7.9 2.2-13.8 6.6-17.7 4.4-3.87 11-5.83 19.9-5.83.4 0 1 .03 1.8.07.8.1 1.4.1 1.9.1v15.7h-1.2c-3.94 0-6.8.7-8.5 2-1.7 1.3-2.52 3.5-2.52 6.5v1.4h12.28zM306.9 142.3h17.06V42.92H306.9v99.38z" fill="#42AC47"/></g></svg>
\ No newline at end of file
+<svg width="542" height="157" viewBox="0 0 542 157" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M299.24 156.94H.06V.28h299.18z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M197.05 110.3c.58 5.4 2.74 9.7 6.45 12.78 3.7 3.13 8.5 4.7 14.37 4.7 3.9 0 7.4-.83 10.53-2.46 3.12-1.66 5.6-3.94 7.4-6.9h18.85c-3.2 8.18-7.94 14.54-14.3 19.08-6.34 4.52-13.67 6.78-22 6.78-5.6 0-10.75-.98-15.46-2.96-4.7-1.98-9-4.9-12.7-8.78-3.6-3.68-6.3-7.94-8.3-12.8-2-4.83-3-9.8-3-14.9 0-5.24.9-10.15 2.7-14.77 1.8-4.63 4.4-8.78 7.9-12.46 3.8-4 8.1-7.1 13-9.3 4.8-2.2 9.7-3.3 14.9-3.3 6.5 0 12.6 1.5 18.2 4.4 5.6 3 10.4 7.2 14.4 12.5 2.4 3.3 4.2 6.9 5.3 10.9s1.74 8.6 1.74 13.8c0 .4 0 1-.08 1.9-.07.9-.1 1.5-.1 1.9h-60zm41.4-13.87c-1.48-5-4-8.8-7.53-11.43-3.52-2.6-7.97-3.92-13.33-3.92-4.7 0-8.8 1.42-12.5 4.24-3.7 2.82-6.2 6.52-7.5 11.1h40.8zm60.8-14c-6.8.54-11.52 2.33-14.2 5.34-2.68 3-4.03 8.4-4.03 16.23v38.3h-17.47V67.22h16.37v8.67c2.64-3.4 5.52-5.9 8.67-7.5 3.1-1.6 6.6-2.4 10.6-2.4v16.3zM135.2 5.18c-21.16-8.25-97.87-11.3-98 34.47C14.82 53.98 0 77.35 0 102.33 0 132.53 24.48 157 54.68 157s54.68-24.48 54.68-54.67c0-23.34-14.63-43.28-35.2-51.1C70.2 49.7 61.6 47 54.73 47.58c-9.8 6.23-21.75 19.04-27.4 31.8 8.4-10.08 21.53-14.48 33.16-12.6 17.1 2.77 30.2 17.63 30.2 35.54 0 19.9-16.2 36.02-36.1 36.02-11 0-20.8-4.9-27.4-12.62-9.7-11.42-12.2-23.8-10.2-35.9C23.9 47.4 74.2 23.27 111.6 14 99.4 20.46 77.4 31.07 62 42.63c44.9 17.34 52.17-20.52 73.2-37.46zm18.2 137.12h-13.73l-28.52-75.08h18.62l17.47 49.9 18.03-49.9h18.14l-30 75.08z" fill="#4C4D41" mask="url(#b)"/><path d="M348.63 110.3c.58 5.4 2.75 9.7 6.45 12.78 3.7 3.13 8.5 4.7 14.38 4.7 3.9 0 7.4-.83 10.53-2.46 3.1-1.66 5.5-3.94 7.4-6.9h18.8c-3.2 8.18-8 14.54-14.3 19.08-6.4 4.52-13.7 6.78-22 6.78-5.6 0-10.8-.98-15.5-2.96-4.7-1.98-8.9-4.9-12.7-8.78-3.6-3.68-6.3-7.94-8.3-12.8-2-4.83-3-9.8-3-14.9 0-5.24.9-10.15 2.7-14.77 1.8-4.63 4.42-8.78 7.92-12.46 3.82-4 8.15-7.1 13-9.3 4.9-2.2 9.9-3.3 15-3.3 6.5 0 12.57 1.5 18.2 4.4 5.64 3 10.44 7.2 14.4 12.5 2.42 3.3 4.2 6.9 5.36 10.9s1.77 8.6 1.77 13.8c0 .4-.04 1-.08 1.9-.08.9-.1 1.5-.1 1.9h-60.1zm41.42-13.87c-1.5-5-4-8.8-7.55-11.43-3.52-2.6-7.96-3.92-13.32-3.92-4.66 0-8.8 1.42-12.5 4.24-3.7 2.82-6.16 6.52-7.44 11.1h40.8zm88.13 45.87v-9.22c-2.1 3.72-5.04 6.5-8.83 8.27-3.8 1.77-8.67 2.65-14.58 2.65-11.1 0-20.37-3.8-27.8-11.37-7.43-7.57-11.15-16.98-11.15-28.2 0-5.3.93-10.3 2.8-15.03 1.86-4.73 4.5-8.9 7.98-12.5 3.73-3.95 7.88-6.86 12.42-8.75 4.54-1.88 9.67-2.84 15.35-2.84 5.45 0 10.15 1 14.1 2.8 3.93 1.8 7.1 4.6 9.5 8.3v-9.1h17.07v75.1h-16.86zm-44.47-38.16c0 6.32 2.1 11.6 6.4 15.87 4.2 4.3 9.3 6.4 15.4 6.4 5.5 0 10.4-2.1 14.6-6.4 4.2-4.3 6.3-9.3 6.3-15 0-6.1-2.1-11.3-6.3-15.7-4.2-4.4-9.1-6.6-14.7-6.6-5.9 0-10.97 2.1-15.17 6.3-4.16 4.2-6.25 9.3-6.25 15.3zm108-36.92v15.56h-12.6v59.52h-16.9V82.78h-8.9V67.22h8.4v-2.05c0-7.9 2.2-13.8 6.6-17.7 4.4-3.87 11-5.83 19.9-5.83.4 0 1 .03 1.8.07.8.1 1.4.1 1.9.1v15.7h-1.2c-3.94 0-6.8.7-8.5 2-1.7 1.3-2.52 3.5-2.52 6.5v1.4h12.28zM306.9 142.3h17.06V42.92H306.9v99.38z" fill="#4F9C45"/></g></svg>
\ No newline at end of file
diff --git a/services/web/public/stylesheets/app/editor.less b/services/web/public/stylesheets/app/editor.less
index 7e0e63113b..65041eeee8 100644
--- a/services/web/public/stylesheets/app/editor.less
+++ b/services/web/public/stylesheets/app/editor.less
@@ -92,6 +92,7 @@
 .toolbar-editor {
 	height: @editor-toolbar-height;
 	background-color: @editor-toolbar-bg;
+	padding: 0 5px;
 	overflow: hidden;
 	position: relative;
 	z-index: 10; // Prevent track changes showing over toolbar
diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index 6a08cfc304..46c3585d24 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -133,12 +133,12 @@
 		height: @new-message-height;
 		background-color: @chat-new-message-bg;
 		padding: @line-height-computed / 4;
-		border-top: 1px solid @editor-border-color;
+		border-top: 1px solid @chat-new-message-border-color;
 		textarea {
 			overflow: auto;
 			resize: none;
 			border-radius: @border-radius-base;
-			border: 1px solid @editor-border-color;
+			border: 1px solid @chat-new-message-border-color;
 			height: 100%;
 			width: 100%;
 			color: @chat-new-message-textarea-color;
diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less
index 35190cd662..36504227a4 100644
--- a/services/web/public/stylesheets/app/editor/history-v2.less
+++ b/services/web/public/stylesheets/app/editor/history-v2.less
@@ -12,9 +12,11 @@
 	color: @history-toolbar-color;
 	padding-left: (@line-height-computed / 2);
 }
-.history-toolbar when (@is-overleaf = false) {
+
+.history-toolbar when (@is-overleaf = false) or (@is-overleaf-light) {
 	border-bottom: @toolbar-border-bottom;
 }
+
 	.history-toolbar-selected-version {
 		white-space: nowrap;
 		overflow: hidden;
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index d97ae3d264..e5bc8da14c 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -169,7 +169,7 @@ ul.folders-menu {
 		border-radius: @sidebar-active-border-radius;
 		> a {
 			background-color: @sidebar-active-bg;
-			font-weight: 700;
+			font-weight: @sidebar-active-font-weight;
 			color: @sidebar-active-color;
 			.subdued {
 				color: @sidebar-active-color;
diff --git a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less
index a14f3b4d4a..3379aba577 100644
--- a/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less
+++ b/services/web/public/stylesheets/app/sidebar-v2-dash-pane.less
@@ -17,7 +17,7 @@
 	flex-shrink: 0;
 	text-align: center;
 	background-color: @v2-dash-pane-bg;
-	color: white;
+	color: @v2-dash-pane-color;
 	font-size: 13px;
 	padding: @line-height-computed / 2;
 }
@@ -32,10 +32,10 @@
 	}
 
 		.project-list-sidebar-v2-pane-toggle {
-			color: white;
+			color: @v2-dash-pane-toggle-color;
 			padding: 0;
 			line-height: 1;
 			&:hover, &:active, &:focus {
-				color: white;
+				color: @v2-dash-pane-toggle-color;
 			}
 		}
diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less
index f88b7c651d..01f41b0507 100755
--- a/services/web/public/stylesheets/components/navbar.less
+++ b/services/web/public/stylesheets/components/navbar.less
@@ -436,6 +436,7 @@
       font-weight: @navbar-btn-font-weight;
       line-height: @navbar-btn-line-height;
       padding: @navbar-btn-padding;
+      background-color: @navbar-default-link-bg;
 
       &:hover,
       &:focus {
@@ -466,6 +467,7 @@
       color: @navbar-subdued-color;
       padding: @navbar-subdued-padding;
       margin-left: 0;
+      background-color: transparent;
       &:hover {
         color: @navbar-subdued-hover-color;
         background-color: @navbar-subdued-hover-bg;
@@ -478,7 +480,7 @@
 
     @media (min-width: @grid-float-breakpoint) {
       > li > a {
-        border-color: @navbar-default-link-color;
+        border-color: @navbar-default-link-border-color;
         margin-left: 1rem;
       }
     }
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 87183d8bf1..5e166c85d6 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -327,6 +327,7 @@
 
 // Navbar links
 @navbar-default-link-color:                @link-color;
+@navbar-default-link-border-color:         @navbar-default-link-color;
 @navbar-default-link-hover-color:          @link-hover-color;
 @navbar-default-link-hover-bg:             @link-hover-color;
 @navbar-default-link-active-color:         #fff;
@@ -835,7 +836,7 @@
 
 @dropdown-divider-margin    :((@line-height-computed / 2) - 1) 0;
 @dropdown-item-padding      : 3px 20px;
-
+@navbar-default-link-bg     : transparent;
 
 // Button colors and sizing
 @btn-border-radius-large : @border-radius-large;
@@ -861,6 +862,7 @@
 @sidebar-active-border-radius  : @border-radius-small;
 @sidebar-active-bg             : @link-color;
 @sidebar-active-color          : #FFF;
+@sidebar-active-font-weight    : 700;
 @sidebar-hover-bg              : transparent;
 @sidebar-hover-text-decoration : underline;
 
@@ -968,6 +970,7 @@
 @chat-new-message-bg              : @gray-lightest;
 @chat-new-message-textarea-bg     : #FFF;
 @chat-new-message-textarea-color  : @gray-dark;
+@chat-new-message-border-color    : @editor-border-color;
 
 // PDF
 @pdf-top-offset                  : @toolbar-tall-height;
diff --git a/services/web/public/stylesheets/core/ol-light-variables.less b/services/web/public/stylesheets/core/ol-light-variables.less
index 3dffb3f005..7278c71297 100644
--- a/services/web/public/stylesheets/core/ol-light-variables.less
+++ b/services/web/public/stylesheets/core/ol-light-variables.less
@@ -1,5 +1,5 @@
 // Styleguide colors
-@ol-blue-gray-0 : #F4F5F8;
+@ol-blue-gray-0 : #F4F5FB;
 @ol-blue-gray-1 : #DFE2E8;
 @ol-blue-gray-2 : #9DA7B7;
 @ol-blue-gray-3 : #727E91;
@@ -17,19 +17,26 @@
 @ol-type-color  : @ol-blue-gray-3;
 
 // Sidebar
-@sidebar-bg                     : @ol-blue-gray-0;
-@sidebar-color                  : @ol-blue-gray-3;
-@sidebar-link-color             : @ol-blue-gray-4;
-@sidebar-active-border-radius   : 0;
-@sidebar-active-bg              : @ol-blue-gray-1;
-@sidebar-active-color           : @ol-blue-gray-4;
-@sidebar-hover-bg               : @ol-blue-gray-1;
-@sidebar-hover-text-decoration  : none;
-@v2-dash-pane-bg                : @ol-blue-gray-4;
-@v2-dash-pane-link-color        : #FFF;
-@v2-dash-pane-btn-bg            : @ol-blue-gray-5;
-@v2-dash-pane-btn-hover-bg      : @ol-blue-gray-6;
+@sidebar-bg                      : #FFF;
+@sidebar-color                   : @ol-blue-gray-2;
+@sidebar-link-color              : @ol-blue-gray-3;
+@sidebar-active-bg               : @ol-green;
+@sidebar-active-color            : #FFF;
+@sidebar-hover-bg                : @ol-blue-gray-1;
+@sidebar-active-font-weight      : normal;
+@sidebar-hover-text-decoration   : none;
 
+@v2-dash-pane-bg                 : @ol-blue-gray-1;
+@v2-dash-pane-link-color         : @ol-blue;
+@v2-dash-pane-toggle-color       : @ol-blue-gray-3;
+@v2-dash-pane-btn-bg             : @ol-blue-gray-5;
+@v2-dash-pane-btn-hover-bg       : @ol-blue-gray-6;
+@v2-dash-pane-color              : @ol-blue-gray-3;
+
+@progress-bar-shadow             : inset 0 -1px 0 rgba(0,0,0,.15);
+@progress-bg                     : @ol-blue-gray-0;
+
+@input-border                    : @ol-blue-gray-1;
 // Editor file-tree
 @file-tree-bg                    : #FFF;
 @file-tree-line-height           : 2.05;
@@ -45,7 +52,7 @@
 @file-tree-multiselect-hover-bg  : @ol-dark-blue;
 @file-tree-droppable-bg-color    : tint(@ol-green, 5%);
 
-@content-alt-bg-color            : @ol-blue-gray-1;
+@content-alt-bg-color            : @ol-blue-gray-0;
 
 // Editor resizers
 @editor-resizer-bg-color         : @ol-blue-gray-1;
@@ -54,13 +61,12 @@
 @editor-toggler-hover-bg-color   : @ol-green;
 @synctex-controls-z-index        : 6;
 @synctex-controls-padding        : 0;
-@editor-border-color             : @ol-blue-gray-5;
-
+@editor-border-color             : @ol-blue-gray-1;
 
 @toolbar-border-color            : @ol-blue-gray-1;
 @toolbar-alt-bg-color            : #FFF;
 @editor-toolbar-bg               : @toolbar-alt-bg-color;
-@navbar-default-bg               : @ol-blue-gray-4;
+
 @toolbar-header-bg-color         : #FFF;
 @toolbar-header-btn-border-color : @ol-blue-gray-1;
 @toolbar-btn-color               : @ol-blue-gray-3;
@@ -72,8 +78,45 @@
 @project-name-color              : @ol-blue-gray-3;
 @pdf-bg                          : @ol-blue-gray-0;
 
+// Navbar
+@navbar-default-bg               : #FFF;
+@navbar-default-border           : @ol-blue-gray-1;
+@navbar-default-link-bg          : @ol-green;
+@navbar-default-link-color       : #FFF;
+@navbar-default-link-border-color: transparent;
+@navbar-default-link-hover-bg    : @ol-green;
+@navbar-default-link-active-bg   : @ol-green;
+@navbar-default-link-hover-color : @ol-green;
+
+@navbar-title-color              : @ol-blue-gray-1;
+@navbar-title-color-hover        : @ol-blue-gray-2;
+@navbar-default-color            : @ol-blue-gray-3;
+@navbar-brand-image-url          : url(/img/ol-brand/overleaf.svg);
+
+@navbar-subdued-color            : @ol-blue-gray-3;
+@navbar-subdued-hover-bg         : @ol-blue-gray-1;
+@navbar-subdued-hover-color      : @ol-blue-gray-3;
+
+@card-box-shadow                 : 0 0 0 1px @ol-blue-gray-1;
+
+// v2 History
+@history-toolbar-color           : @ol-blue-gray-3;
+@history-entry-day-bg            : @ol-blue-gray-2;
+@history-base-bg                 : @ol-blue-gray-0;
+
 // Formatting buttons
 @formatting-btn-color            : @toolbar-icon-btn-color;
 @formatting-btn-bg               : transparent;
 @formatting-btn-border           : @ol-blue-gray-1;
 @formatting-menu-bg              : transparent;
+
+
+// Chat 
+@chat-bg                          : #FFF;
+@chat-message-color               : #FFF;
+@chat-message-name-color          : @ol-blue-gray-3;
+@chat-message-date-color          : @ol-blue-gray-3;
+@chat-new-message-bg              : @ol-blue-gray-0;
+@chat-new-message-textarea-bg     : #FFF;
+@chat-new-message-textarea-color  : @ol-blue-gray-6;
+@chat-new-message-border-color    : @ol-blue-gray-1;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 80f2fbda0e..f5ca77cf04 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -33,7 +33,7 @@
 @navbar-default-bg        : @ol-blue-gray-6;
 @navbar-default-border    : transparent;
 @navbar-brand-image-url   : url(/img/ol-brand/overleaf-white.svg);
-
+@navbar-default-link-bg   : transparent;
 // Backgrounds
 @body-bg                : #FFF;
 @content-alt-bg-color   : @ol-blue-gray-1;
@@ -110,6 +110,7 @@
 @navbar-default-padding-h         : 10px;
 @navbar-default-padding           : @navbar-default-padding-v @navbar-default-padding-h;
 @navbar-default-link-color        : #FFF;
+@navbar-default-link-border-color : @navbar-default-link-color;
 @navbar-default-link-hover-bg     : @ol-green;
 @navbar-default-link-active-bg    : @ol-green;
 @navbar-default-link-hover-color  : @ol-green;
@@ -150,10 +151,13 @@
 @sidebar-active-border-radius   : 0;
 @sidebar-active-bg              : @ol-blue-gray-6;
 @sidebar-active-color           : #FFF;
+@sidebar-active-font-weight     : 700;
 @sidebar-hover-bg               : @ol-blue-gray-4;
 @sidebar-hover-text-decoration  : none;
 @v2-dash-pane-bg                : @ol-blue-gray-4;
 @v2-dash-pane-link-color        : #FFF;
+@v2-dash-pane-color             : #FFF;
+@v2-dash-pane-toggle-color      : #FFF;
 @v2-dash-pane-btn-bg            : @ol-blue-gray-5;
 @v2-dash-pane-btn-hover-bg      : @ol-blue-gray-6;
 
@@ -279,6 +283,7 @@
 @chat-new-message-bg              : @ol-blue-gray-4;
 @chat-new-message-textarea-bg     : @ol-blue-gray-1;
 @chat-new-message-textarea-color  : @ol-blue-gray-6;
+@chat-new-message-border-color    : @editor-border-color;
 
 // Pagination
 @pagination-active-bg             : @ol-dark-green;

From efc926ffc5c19dcffecfcb4672f2be4b479b5e32 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 27 Aug 2018 15:25:00 +0100
Subject: [PATCH 08/14] Load theme as a user setting; allow the user to change
 it; update tests.

---
 .../Features/Project/ProjectController.coffee |  7 ++++---
 .../Features/User/UserController.coffee       |  6 ++++--
 .../infrastructure/ExpressLocals.coffee       |  6 ++++++
 services/web/app/coffee/models/User.coffee    |  1 +
 services/web/app/views/layout.pug             |  2 +-
 .../web/app/views/project/editor/editor.pug   |  2 +-
 .../project/editor/history/diffPanelV1.pug    |  2 +-
 .../project/editor/history/previewPanelV2.pug |  4 ++--
 .../app/views/project/editor/left-menu.pug    | 19 ++++++++++++++-----
 services/web/public/coffee/ide.coffee         |  2 +-
 .../highlights/HighlightsManager.coffee       |  1 +
 .../controllers/SettingsController.coffee     | 10 +++++++---
 .../Project/ProjectControllerTests.coffee     |  2 +-
 .../coffee/User/UserControllerTests.coffee    | 10 +++++++++-
 14 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee
index f3d12bf5c5..089ad9c342 100644
--- a/services/web/app/coffee/Features/Project/ProjectController.coffee
+++ b/services/web/app/coffee/Features/Project/ProjectController.coffee
@@ -294,7 +294,7 @@ module.exports = ProjectController =
 			project = results.project
 			user = results.user
 			subscription = results.subscription
-
+			
 			daysSinceLastUpdated =  (new Date() - project.lastUpdated) / 86400000
 			logger.log project_id:project_id, daysSinceLastUpdated:daysSinceLastUpdated, "got db results for loading editor"
 
@@ -330,7 +330,7 @@ module.exports = ProjectController =
 					}
 					userSettings: {
 						mode  : user.ace.mode
-						theme : user.ace.theme
+						editorTheme : user.ace.theme
 						fontSize : user.ace.fontSize
 						autoComplete: user.ace.autoComplete
 						autoPairDelimiters: user.ace.autoPairDelimiters
@@ -338,6 +338,7 @@ module.exports = ProjectController =
 						syntaxValidation: user.ace.syntaxValidation
 						fontFamily: user.ace.fontFamily
 						lineHeight: user.ace.lineHeight
+						overallTheme: user.overallTheme
 					}
 					trackChangesState: project.track_changes
 					privilegeLevel: privilegeLevel
@@ -346,7 +347,7 @@ module.exports = ProjectController =
 					anonymousAccessToken: req._anonymousAccessToken
 					isTokenMember: isTokenMember
 					languages: Settings.languages
-					themes: THEME_LIST
+					editorThemes: THEME_LIST
 					maxDocLength: Settings.max_doc_length
 					useV2History: !!project.overleaf?.history?.display
 					richTextEnabled: Features.hasFeature('rich-text')
diff --git a/services/web/app/coffee/Features/User/UserController.coffee b/services/web/app/coffee/Features/User/UserController.coffee
index 823919f999..3b26921a30 100644
--- a/services/web/app/coffee/Features/User/UserController.coffee
+++ b/services/web/app/coffee/Features/User/UserController.coffee
@@ -68,8 +68,8 @@ module.exports = UserController =
 				user.institution = req.body.institution.trim()
 			if req.body.mode?
 				user.ace.mode = req.body.mode
-			if req.body.theme?
-				user.ace.theme = req.body.theme
+			if req.body.editorTheme?
+				user.ace.theme = req.body.editorTheme
 			if req.body.fontSize?
 				user.ace.fontSize = req.body.fontSize
 			if req.body.autoComplete?
@@ -86,6 +86,8 @@ module.exports = UserController =
 				user.ace.fontFamily = req.body.fontFamily
 			if req.body.lineHeight?
 				user.ace.lineHeight = req.body.lineHeight
+			if req.body.overallTheme?
+				user.overallTheme = req.body.overallTheme
 
 			user.save (err)->
 				newEmail = req.body.email?.trim().toLowerCase()
diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index d4444b3542..4b418e46e7 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -163,6 +163,12 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 				return Url.resolve(staticFilesBase, hashedPath)
 			return Url.resolve(staticFilesBase, path)
 
+		res.locals.buildCssFileName = (userSettings) ->
+			themeModifier = ""
+			if userSettings?.overallTheme? and Settings.overleaf?
+				themeModifier = userSettings.overallTheme
+			return "/" + Settings.brandPrefix + themeModifier + "style.css"
+
 		res.locals.buildImgPath = (imgFile)->
 			path = Path.join("/img/", imgFile)
 			return Url.resolve(staticFilesBase, path)
diff --git a/services/web/app/coffee/models/User.coffee b/services/web/app/coffee/models/User.coffee
index 730b3668c6..f61fe2cecf 100644
--- a/services/web/app/coffee/models/User.coffee
+++ b/services/web/app/coffee/models/User.coffee
@@ -72,6 +72,7 @@ UserSchema = new Schema
 		id: { type: Number }
 		accessToken: { type: String }
 		refreshToken: { type: String }
+	overallTheme: { type: String, default: "" }
 	awareOfV2: { type:Boolean, default: false }
 
 conn = mongoose.createConnection(Settings.mongo.url, {
diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 129e30a4a0..6aab8abdd6 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -21,7 +21,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 		link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath("/" + settings.brandPrefix + (settings.themeModifier != null ? settings.themeModifier : "") + "style.css", {hashedPath:true}))
+		link(rel='stylesheet', href=buildCssPath(buildCssFileName(userSettings), {hashedPath:true}))
 
 		block _headLinks
 
diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug
index 69a874cc05..fda0fa6446 100644
--- a/services/web/app/views/project/editor/editor.pug
+++ b/services/web/app/views/project/editor/editor.pug
@@ -44,7 +44,7 @@ div.full-size(
 			ng-if="!editor.showRichText",
 			ng-show="!!editor.sharejs_doc && !editor.opening",
 			style=richTextEnabled ? "top: 32px" : "",
-			theme="settings.theme",
+			theme="settings.editorTheme",
 			keybindings="settings.mode",
 			font-size="settings.fontSize",
 			auto-complete="settings.autoComplete",
diff --git a/services/web/app/views/project/editor/history/diffPanelV1.pug b/services/web/app/views/project/editor/history/diffPanelV1.pug
index 369f3703b0..cae58b56f2 100644
--- a/services/web/app/views/project/editor/history/diffPanelV1.pug
+++ b/services/web/app/views/project/editor/history/diffPanelV1.pug
@@ -20,7 +20,7 @@
 				) #{translate("restore_to_before_these_changes")}
 		.diff-editor.hide-ace-cursor(
 			ace-editor="history",
-			theme="settings.theme",
+			theme="settings.editorTheme",
 			font-size="settings.fontSize",
 			text="history.diff.text",
 			highlights="history.diff.highlights",
diff --git a/services/web/app/views/project/editor/history/previewPanelV2.pug b/services/web/app/views/project/editor/history/previewPanelV2.pug
index e75af8db90..31f08956a6 100644
--- a/services/web/app/views/project/editor/history/previewPanelV2.pug
+++ b/services/web/app/views/project/editor/history/previewPanelV2.pug
@@ -40,7 +40,7 @@
 		.diff-editor.hide-ace-cursor(
 			ng-if="!history.diff.binary"
 			ace-editor="history",
-			theme="settings.theme",
+			theme="settings.editorTheme",
 			font-size="settings.fontSize",
 			text="history.diff.text",
 			highlights="history.diff.highlights",
@@ -66,7 +66,7 @@
 		.hide-ace-cursor(
 			ng-if="!history.selectedFile.binary"
 			ace-editor="history-pointintime",
-			theme="settings.theme",
+			theme="settings.editorTheme",
 			font-size="settings.fontSize",
 			text="history.selectedFile.text",
 			read-only="true",
diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug
index bbfa4c480c..dc446e0582 100644
--- a/services/web/app/views/project/editor/left-menu.pug
+++ b/services/web/app/views/project/editor/left-menu.pug
@@ -131,13 +131,22 @@ aside#left-menu.full-size(
 				)
 
 			.form-controls
-				label(for="theme") #{translate("theme")}
+				label(for="editorTheme") #{translate("theme")}
 				select(
-					name="theme"
-					ng-model="settings.theme"
+					name="editorTheme"
+					ng-model="settings.editorTheme"
 				)
-					each theme in themes
-						option(value=theme) #{theme.replace(/_/g, ' ')}
+					each editorTheme in editorThemes
+						option(value=editorTheme) #{editorTheme.replace(/_/g, ' ')}
+
+			- if (settings.overleaf != null)
+				.form-controls
+					label(for="overallTheme") overall theme
+					select(
+						name="overallTheme"
+						ng-model="settings.overallTheme"
+						ng-options="o.v as o.n for o in [{ n: 'Default', v: '' }, { n: 'Light', v: 'light-' }]"
+					)
 
 			.form-controls(ng-show="!anonymous")
 				label(for="mode") #{translate("keybindings")}
diff --git a/services/web/public/coffee/ide.coffee b/services/web/public/coffee/ide.coffee
index 7e25f9ca64..518391a1e9 100644
--- a/services/web/public/coffee/ide.coffee
+++ b/services/web/public/coffee/ide.coffee
@@ -185,7 +185,7 @@ define [
 			"twilight", "vibrant_ink"
 		]
 		$scope.darkTheme = false
-		$scope.$watch "settings.theme", (theme) ->
+		$scope.$watch "settings.editorTheme", (theme) ->
 			if theme in DARK_THEMES
 				$scope.darkTheme = true
 			else
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
index 92f3ac599c..72f4baa735 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
@@ -28,6 +28,7 @@ define [
 				@redrawAnnotations()
 
 			@$scope.$watch "theme", (value) =>
+				console.log value
 				@redrawAnnotations()
 
 			@editor.on "mousemove", (e) =>
diff --git a/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee b/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
index 2e8c09739e..e57f6f5d23 100644
--- a/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
+++ b/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
@@ -19,9 +19,13 @@ define [
 				$scope.settings.fontSize = newVal
 			return $scope.settings.fontSize.toString()
 
-		$scope.$watch "settings.theme", (theme, oldTheme) =>
-			if theme != oldTheme
-				settings.saveSettings({theme: theme})
+		$scope.$watch "settings.editorTheme", (editorTheme, oldEditorTheme) =>
+			if editorTheme != oldEditorTheme
+				settings.saveSettings({editorTheme})
+
+		$scope.$watch "settings.overallTheme", (overallTheme, oldOverallTheme) =>
+			if overallTheme != oldOverallTheme
+				settings.saveSettings({overallTheme})
 
 		$scope.$watch "settings.fontSize", (fontSize, oldFontSize) =>
 			if fontSize != oldFontSize
diff --git a/services/web/test/unit/coffee/Project/ProjectControllerTests.coffee b/services/web/test/unit/coffee/Project/ProjectControllerTests.coffee
index 46e54501c9..dc23107d66 100644
--- a/services/web/test/unit/coffee/Project/ProjectControllerTests.coffee
+++ b/services/web/test/unit/coffee/Project/ProjectControllerTests.coffee
@@ -524,7 +524,7 @@ describe "ProjectController", ->
 		it "should add on userSettings", (done)->
 			@res.render = (pageName, opts)=>
 				opts.userSettings.fontSize.should.equal @user.ace.fontSize
-				opts.userSettings.theme.should.equal @user.ace.theme
+				opts.userSettings.editorTheme.should.equal @user.ace.theme
 				done()
 			@ProjectController.loadEditor @req, @res
 
diff --git a/services/web/test/unit/coffee/User/UserControllerTests.coffee b/services/web/test/unit/coffee/User/UserControllerTests.coffee
index d589852a37..32f760a87c 100644
--- a/services/web/test/unit/coffee/User/UserControllerTests.coffee
+++ b/services/web/test/unit/coffee/User/UserControllerTests.coffee
@@ -224,12 +224,20 @@ describe "UserController", ->
 
 		it "should set some props on ace", (done)->
 			@req.body =
-				theme: "something"
+				editorTheme: "something"
 			@res.sendStatus = (code)=>
 				@user.ace.theme.should.equal "something"
 				done()
 			@UserController.updateUserSettings @req, @res
 
+		it "should set the overall theme", (done)->
+			@req.body =
+				overallTheme: "green-ish"
+			@res.sendStatus = (code)=>
+				@user.overallTheme.should.equal "green-ish"
+				done()
+			@UserController.updateUserSettings @req, @res
+
 		it "should send an error if the email is 0 len", (done)->
 			@req.body.email = ""
 			@res.sendStatus = (code)->

From 64c29787c02d60022ec9528eff8503b0d19c02e8 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Mon, 27 Aug 2018 15:57:51 +0100
Subject: [PATCH 09/14] Add i18n; update the review icon image.

---
 .../app/views/project/editor/left-menu.pug    |   4 ++--
 .../highlights/HighlightsManager.coffee       |   1 -
 .../web/public/img/review-icon-sprite-ol.png  | Bin 765 -> 2136 bytes
 .../public/img/review-icon-sprite-ol@2x.png   | Bin 1082 -> 2770 bytes
 .../stylesheets/app/editor/review-panel.less  |   9 +++++++++
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug
index dc446e0582..5a683cddbd 100644
--- a/services/web/app/views/project/editor/left-menu.pug
+++ b/services/web/app/views/project/editor/left-menu.pug
@@ -131,7 +131,7 @@ aside#left-menu.full-size(
 				)
 
 			.form-controls
-				label(for="editorTheme") #{translate("theme")}
+				label(for="editorTheme") #{translate("editor_theme")}
 				select(
 					name="editorTheme"
 					ng-model="settings.editorTheme"
@@ -141,7 +141,7 @@ aside#left-menu.full-size(
 
 			- if (settings.overleaf != null)
 				.form-controls
-					label(for="overallTheme") overall theme
+					label(for="overallTheme") #{translate("overall_theme")}
 					select(
 						name="overallTheme"
 						ng-model="settings.overallTheme"
diff --git a/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee b/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
index 72f4baa735..92f3ac599c 100644
--- a/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
+++ b/services/web/public/coffee/ide/editor/directives/aceEditor/highlights/HighlightsManager.coffee
@@ -28,7 +28,6 @@ define [
 				@redrawAnnotations()
 
 			@$scope.$watch "theme", (value) =>
-				console.log value
 				@redrawAnnotations()
 
 			@editor.on "mousemove", (e) =>
diff --git a/services/web/public/img/review-icon-sprite-ol.png b/services/web/public/img/review-icon-sprite-ol.png
index 1e5c7192e4d649f6e1cff67cbc31dfffaca2c6ea..17c79182b0a85c41f73c14efdc611fc9a9406dba 100644
GIT binary patch
literal 2136
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

delta 719
zcmV;=0x<p95d8&^7YZH-1^@s6J20-Iks&940-s4lK~#9!?ABjsPH`N^@n<Y+d&Zb2
zX>Dm^SlV#$#Kl<6pQ5znVw5$KDcms1ofPH96^)WwONw2PY{F_>%!Sc%u`!#Kl0VM{
z%Es)E<Nf9H<TyQl&SZA;{OZ*?=XZYRe4q3C_kGeF#|cbDnHHF$k_!CaO1h6W(@}zd
zMaV-4!+48V=*9bg8MqKTu?@=;w6mZcxQv?^_Y*iR#&XKSVbo)`>bmh<Uuc0ck&j}O
zB3JDm;3ztiMz+8%Ik@BeD&KJt<(T1V=a!Fs=y86Rx&-Zia$jWNo*uN9tV#B;$4s0+
zD;iPeH*mdzcB9y5FdM20Y(lo`mS8=93KR8|``5n2C@LrLl~u0ptx#Q~uI)W*<2@Ul
z)eBLCF0}hx5!pEHx}LA&H;myEJ}28ia&-J)^UY^qoB2y|UDqo-_X|*itJsfVtXW-x
zarA1ECF|nF7(pAt>e^P_YtXx_3?ia)o4A?YF-}LPme6h=fv;f<rO3rFx^(Y<tODKE
zQk$#xR`$l4)z!Kg(O1L^x=!t`Ac#B+=sCN8M)!+c&lIVy$ve3M8jErqL>rFbyzYgu
z1B2MEy3Od<ULI22C9K2<j$lajK~1=@&WF5vwQZB5ID`hh^qdmHUDRotyn(0MI&Cs;
zRKORQqw^=O<dLVmFc96#y=ifOM6-2|u4{CBtwgX&FSq(Wy|@Jz)XsXKN9UHoZb@{d
zw5UFAcFNGPPhI>FC-uv>U@MxmR!`~ct!%(oom;l5#1{>prO)O>*~!N1F&5yRzN$*&
zXJ5VxW%|)?)MlB6<i4&gU<B35c8_oX&*EjLEHpcRmJWm_m@uMjDHS9-OA_X|f_+3g
zYBB3CgC^wd>eZO13DQ5A|GCmqf9O+zC#(DrU;tH4(}eP@euMx3002ovPDHLkV1lb4
BbVmRH

diff --git a/services/web/public/img/review-icon-sprite-ol@2x.png b/services/web/public/img/review-icon-sprite-ol@2x.png
index 87aec7c1631c1f7f5a7210d1b7bc1169fca34c78..5e145bce8e2e1a311cb95c22b039abac4e8881d8 100644
GIT binary patch
literal 2770
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

delta 1037
zcmV+o1oHdR6}kwJ7YaNG1^@s6I{evkks&C5+(|@1RCwC#T0Mx=Kori&Vs$6ZRhGJn
zcvlIz#zM{_7J_KC3xc54S_p#Go@XOgcL?@b5&K;W1-oovB?!Bg3d(LJC>FWH%0}WF
zc!BXTe@Q0s)|&?(o1e)f-+XUo-n`kREX#t!WJiKSW}dJo><N3qp0FqE3I985)lg@D
z8^J9k_onzeM=T^^PAWq1V`ll>9yY)jF>QkIQps4FE7$?_1U0J~S9}B*)T%xwTmWrA
zoYikJzAJEzA`15bI~L_W0zTpKJMKloy$kre23WVKYYVX3w89}^qETZGcnH`894pY;
zEBMSdV5X^mg5TgoVH>ik;zM2mt^<~T9eoV1>$T!tsVmZD$bQC;3u?kOd`B&$i;{id
zP*EM0@m(ppdyWr)^K}rOD98p4V@+}`a!t6`Fj+<*yWd9S_s_W`oHj^yN77GenW1oh
zC=76=-boh^9TFPu1D@9u^Dvy-%h*x;*2=4;h@3wL{HTfWP|*msv3TTyFkRh$ys3$7
zr1@am*u0eIwG4#6G^nmf*tBvQEm8uYPu%u$30LL9#DD}bwC>Y}5qhPDDJYYSx}qhT
zQ940nnh>;IWLlz?xeg&|{Y=u(sfMtvwQZ-RF*(2J(3L~tu3MP(2uPo`9jW=UaRbm5
z>d7s!b?LUGwKg58J1d|f)7(pc6%iR-Vn#L!&m}4k3e1fvqp6^-!LxJ&*M>yV{5pN7
z)hNA1&d&m#RwNt~a$`wD(*Q(fV@<wm&n6Kl%UVv6w3yDh4Oj)-1$?bQHm|>D2sR@0
zEEy?NA~4i>i7uxlo7;FGvJH4CDSr|hhAMThghzbC_wVC3tP7Ff)G#oAUd7{IfGdEv
zwmB`P$z?r}l)sc6JbP3$Yst{Hdy0YRndaFJ2_f@jJ5#u7hq(4CUKc%WBpL8jUOART
zan^b1z9b5p8=f((b17m)@GvA9OkEwRB#QeBwp%T`*t&_J!YRNBz;{V`n!oM}9wUo+
z2dGGo^vAiRkA{kV91-t-8M)YbpepBi=+l5Rig<aV2`xn>B65AFK;Xe7^#)ZG&iky`
zg6{!80k;4*h5nK#)D0C=1(SrAx^*!xpQ3_OMdsv=i@hZpy4?r7z~fM%QcRwop~^!X
z7kK&O3YF55i-)+%&VwqGxkt`JMS7Q2h_`2w!7MT~K;Ok?8h5RDi6NfeXlj3#Y}Ycf
z)oO~wtmffFlKPRQTy6k<FY<ppY{=%5dv_7Yn*Q?8*N`2cs^eh6tYzpYbe%l4?JEb>
zbbXi!QO&{<EIMfYcjo_z=Lvhlp0FqE346kxuqRxX{SjaQC}#!hfJc$U00000NkvXX
Hu0mjfL-gx(

diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index a7e7d3fdbd..c1bf6d59d7 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -949,6 +949,7 @@
 	display: inline-block;
 	background: url('/img/review-icon-sprite-ol.png') top/30px no-repeat;
 	width: 30px;
+	background-position-y: -30px;
 
 	&::before {
 		content: '\00a0'; // Non-breakable space. A non-breakable character here makes this icon work like font-awesome.
@@ -959,6 +960,14 @@
 	}
 }
 
+.review-icon when (@is-overleaf-light = true) {
+	background-position-y: 0;
+	.toolbar .btn-full-height.active &,
+	.toolbar .btn-full-height:active & {
+		background-position-y: -30px;
+	}
+}
+
 .resolved-comments-toggle {
 	font-size: 14px;
 	color: lighten(@rp-type-blue, 25%);

From 307a98851d7d07bc271a21823ddb7f047042bf8b Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 28 Aug 2018 10:10:16 +0100
Subject: [PATCH 10/14] Nest the overall theme property under ace.

---
 .../web/app/coffee/Features/Project/ProjectController.coffee  | 2 +-
 services/web/app/coffee/Features/User/UserController.coffee   | 4 ++--
 services/web/app/coffee/models/User.coffee                    | 2 +-
 .../main/affiliations/components/affiliationForm.coffee       | 1 -
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee
index 089ad9c342..d2f15b4ba3 100644
--- a/services/web/app/coffee/Features/Project/ProjectController.coffee
+++ b/services/web/app/coffee/Features/Project/ProjectController.coffee
@@ -338,7 +338,7 @@ module.exports = ProjectController =
 						syntaxValidation: user.ace.syntaxValidation
 						fontFamily: user.ace.fontFamily
 						lineHeight: user.ace.lineHeight
-						overallTheme: user.overallTheme
+						overallTheme: user.ace.overallTheme
 					}
 					trackChangesState: project.track_changes
 					privilegeLevel: privilegeLevel
diff --git a/services/web/app/coffee/Features/User/UserController.coffee b/services/web/app/coffee/Features/User/UserController.coffee
index 3b26921a30..a9c4e2a00d 100644
--- a/services/web/app/coffee/Features/User/UserController.coffee
+++ b/services/web/app/coffee/Features/User/UserController.coffee
@@ -70,6 +70,8 @@ module.exports = UserController =
 				user.ace.mode = req.body.mode
 			if req.body.editorTheme?
 				user.ace.theme = req.body.editorTheme
+			if req.body.overallTheme?
+				user.ace.overallTheme = req.body.overallTheme
 			if req.body.fontSize?
 				user.ace.fontSize = req.body.fontSize
 			if req.body.autoComplete?
@@ -86,8 +88,6 @@ module.exports = UserController =
 				user.ace.fontFamily = req.body.fontFamily
 			if req.body.lineHeight?
 				user.ace.lineHeight = req.body.lineHeight
-			if req.body.overallTheme?
-				user.overallTheme = req.body.overallTheme
 
 			user.save (err)->
 				newEmail = req.body.email?.trim().toLowerCase()
diff --git a/services/web/app/coffee/models/User.coffee b/services/web/app/coffee/models/User.coffee
index f61fe2cecf..95bedebbf4 100644
--- a/services/web/app/coffee/models/User.coffee
+++ b/services/web/app/coffee/models/User.coffee
@@ -27,6 +27,7 @@ UserSchema = new Schema
 	ace               : {
 		mode               : {type : String, default: 'none'}
 		theme              : {type : String, default: 'textmate'}
+		overallTheme       : {type: String, default: "" }
 		fontSize           : {type : Number, default:'12'}
 		autoComplete       : {type : Boolean, default: true}
 		autoPairDelimiters : {type : Boolean, default: true}
@@ -72,7 +73,6 @@ UserSchema = new Schema
 		id: { type: Number }
 		accessToken: { type: String }
 		refreshToken: { type: String }
-	overallTheme: { type: String, default: "" }
 	awareOfV2: { type:Boolean, default: false }
 
 conn = mongoose.createConnection(Settings.mongo.url, {
diff --git a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
index abcdf50cd2..1c0c7d6229 100644
--- a/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
+++ b/services/web/public/coffee/main/affiliations/components/affiliationForm.coffee
@@ -10,7 +10,6 @@ define [
 		_defaultDepartments = []
 
 		ctrl.addUniversityToSelection = (universityName) -> 
-			console.log universityName
 			{ name: universityName, isUserSuggested: true }
 		# Populates the countries dropdown
 		UserAffiliationsDataService

From 90b353298df4cad7b58acb6a247789216aca5edc Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 28 Aug 2018 14:12:00 +0100
Subject: [PATCH 11/14] Switch themes at runtime.

---
 .../Features/Project/ProjectController.coffee |  1 +
 .../infrastructure/ExpressLocals.coffee       | 17 ++++++++++---
 services/web/app/views/layout.pug             |  2 +-
 services/web/app/views/project/editor.pug     |  4 +++
 .../app/views/project/editor/left-menu.pug    |  7 +++++-
 .../controllers/SettingsController.coffee     | 25 +++++++++++++++++--
 .../stylesheets/app/editor/left-menu.less     |  3 ++-
 7 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee
index d2f15b4ba3..b0e0156f3b 100644
--- a/services/web/app/coffee/Features/Project/ProjectController.coffee
+++ b/services/web/app/coffee/Features/Project/ProjectController.coffee
@@ -288,6 +288,7 @@ module.exports = ProjectController =
 					return cb()
 				CollaboratorsHandler.userIsTokenMember user_id, project_id, cb
 		}, (err, results)->
+			logger.log locals: res.locals, "### locals"
 			if err?
 				logger.err err:err, "error getting details for project page"
 				return next err
diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 4b418e46e7..0dbf56ff51 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -44,6 +44,7 @@ pathList = [
 	"#{jsPath}libraries.js"
 	"/stylesheets/style.css"
 	"/stylesheets/ol-style.css"
+	"/stylesheets/ol-light-style.css"
 ].concat(Modules.moduleAssetFiles(jsPath))
 
 if !Settings.useMinifiedJs 
@@ -163,11 +164,13 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 				return Url.resolve(staticFilesBase, hashedPath)
 			return Url.resolve(staticFilesBase, path)
 
-		res.locals.buildCssFileName = (userSettings) ->
-			themeModifier = ""
+		res.locals.buildCssFileNameForUser = (userSettings) ->
 			if userSettings?.overallTheme? and Settings.overleaf?
 				themeModifier = userSettings.overallTheme
-			return "/" + Settings.brandPrefix + themeModifier + "style.css"
+			return res.locals.buildCssFileName(themeModifier)
+
+		res.locals.buildCssFileName = (themeModifier) ->
+			return "/" + Settings.brandPrefix + (if themeModifier then themeModifier else "") + "style.css"
 
 		res.locals.buildImgPath = (imgFile)->
 			path = Path.join("/img/", imgFile)
@@ -340,6 +343,14 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			renderAnnouncements        : !isOl
 		next()
 
+	webRouter.use (req, res, next) ->
+		if Settings.overleaf?
+			res.locals.overallThemes = [
+				{ name: "Default", val: "",       path: res.locals.buildCssPath(res.locals.buildCssFileName()) }
+				{ name: "Light",   val: "light-", path: res.locals.buildCssPath(res.locals.buildCssFileName("light-")) }
+			]
+		next()
+
 	webRouter.use (req, res, next) ->
 		res.locals.ExposedSettings =
 			isOverleaf: Settings.overleaf?
diff --git a/services/web/app/views/layout.pug b/services/web/app/views/layout.pug
index 6aab8abdd6..27398e45db 100644
--- a/services/web/app/views/layout.pug
+++ b/services/web/app/views/layout.pug
@@ -21,7 +21,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 		link(rel="mask-icon", href="/" + settings.brandPrefix + "mask-favicon.svg", color=settings.brandPrefix === 'ol-' ? "#4f9c45" : "#a93529")
 
 		//- Stylesheet
-		link(rel='stylesheet', href=buildCssPath(buildCssFileName(userSettings), {hashedPath:true}))
+		link(rel='stylesheet', href=buildCssPath(buildCssFileNameForUser(userSettings), {hashedPath:true}), id="main-stylesheet")
 
 		block _headLinks
 
diff --git a/services/web/app/views/project/editor.pug b/services/web/app/views/project/editor.pug
index 08124c334c..45af551fe3 100644
--- a/services/web/app/views/project/editor.pug
+++ b/services/web/app/views/project/editor.pug
@@ -174,6 +174,10 @@ block requirejs
 		window.pdfCMapsPath = "#{pdfCMapsPath}"
 		window.uiConfig = JSON.parse('!{JSON.stringify(uiConfig).replace(/\//g, "\\/")}');
 
+	- if (settings.overleaf != null)
+		script(type='text/javascript').
+			window.overallThemes = JSON.parse('!{JSON.stringify(overallThemes).replace(/\//g, "\\/")}');
+
 	script(
 		data-main=buildJsPath("ide.js", {hashedPath:false}),
 		baseurl=fullJsPath,
diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug
index 5a683cddbd..311ae54058 100644
--- a/services/web/app/views/project/editor/left-menu.pug
+++ b/services/web/app/views/project/editor/left-menu.pug
@@ -144,9 +144,14 @@ aside#left-menu.full-size(
 					label(for="overallTheme") #{translate("overall_theme")}
 					select(
 						name="overallTheme"
+						ng-if="!ui.loadingStyleSheet"
 						ng-model="settings.overallTheme"
-						ng-options="o.v as o.n for o in [{ n: 'Default', v: '' }, { n: 'Light', v: 'light-' }]"
+						ng-options="overallTheme.val as overallTheme.name for overallTheme in overallThemesList"
 					)
+					p.loading.pull-right(
+						ng-if="ui.loadingStyleSheet"
+					)
+						i.fa.fa-fw.fa-spin.fa-refresh
 
 			.form-controls(ng-show="!anonymous")
 				label(for="mode") #{translate("keybindings")}
diff --git a/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee b/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
index e57f6f5d23..8eb3cff886 100644
--- a/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
+++ b/services/web/public/coffee/ide/settings/controllers/SettingsController.coffee
@@ -1,7 +1,25 @@
 define [
 	"base"
 ], (App) ->
-	App.controller "SettingsController", ["$scope", "settings", "ide", ($scope, settings, ide) ->
+	App.controller "SettingsController", ["$scope", "settings", "ide", "_", ($scope, settings, ide, _) ->
+		$scope.overallThemesList = window.overallThemes
+		$scope.ui = 
+			loadingStyleSheet: false
+
+		_updateCSSFile = (theme) ->
+			$scope.ui.loadingStyleSheet = true
+			docHeadEl = document.querySelector "head"
+			oldStyleSheetEl = document.getElementById "main-stylesheet"
+			newStyleSheetEl = document.createElement "link" 
+			newStyleSheetEl.addEventListener "load", (e) =>
+				$scope.$applyAsync () =>
+					$scope.ui.loadingStyleSheet = false
+					docHeadEl.removeChild oldStyleSheetEl
+			newStyleSheetEl.setAttribute "rel", "stylesheet"
+			newStyleSheetEl.setAttribute "id", "main-stylesheet"
+			newStyleSheetEl.setAttribute "href", theme.path
+			docHeadEl.appendChild newStyleSheetEl
+
 		if $scope.settings.mode not in ["default", "vim", "emacs"]
 			$scope.settings.mode = "default"
 			
@@ -25,7 +43,10 @@ define [
 
 		$scope.$watch "settings.overallTheme", (overallTheme, oldOverallTheme) =>
 			if overallTheme != oldOverallTheme
-				settings.saveSettings({overallTheme})
+				chosenTheme = _.find $scope.overallThemesList, (theme) -> theme.val == overallTheme
+				if chosenTheme?
+					_updateCSSFile chosenTheme
+					settings.saveSettings({overallTheme})
 
 		$scope.$watch "settings.fontSize", (fontSize, oldFontSize) =>
 			if fontSize != oldFontSize
diff --git a/services/web/public/stylesheets/app/editor/left-menu.less b/services/web/public/stylesheets/app/editor/left-menu.less
index 438ef9eb77..e1e918fa29 100644
--- a/services/web/public/stylesheets/app/editor/left-menu.less
+++ b/services/web/public/stylesheets/app/editor/left-menu.less
@@ -100,7 +100,8 @@
 				// select.form-control {
 				// 	color: white;
 				// }
-				label {
+				label,
+				i.fa {
 					color: white;
 				}
 			}

From 76fcee721ee10ee7ceb6c3db39a190f55a4b2c5e Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 28 Aug 2018 14:24:05 +0100
Subject: [PATCH 12/14] Update unit tests.

---
 services/web/test/unit/coffee/User/UserControllerTests.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/test/unit/coffee/User/UserControllerTests.coffee b/services/web/test/unit/coffee/User/UserControllerTests.coffee
index 32f760a87c..becc26ef69 100644
--- a/services/web/test/unit/coffee/User/UserControllerTests.coffee
+++ b/services/web/test/unit/coffee/User/UserControllerTests.coffee
@@ -234,7 +234,7 @@ describe "UserController", ->
 			@req.body =
 				overallTheme: "green-ish"
 			@res.sendStatus = (code)=>
-				@user.overallTheme.should.equal "green-ish"
+				@user.ace.overallTheme.should.equal "green-ish"
 				done()
 			@UserController.updateUserSettings @req, @res
 

From 32ff66b0dd8807c137e71cbc543d1f1bf2ea095d Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 28 Aug 2018 14:52:25 +0100
Subject: [PATCH 13/14] Add two more font-size options to the editor.

---
 services/web/app/views/project/editor/left-menu.pug | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/app/views/project/editor/left-menu.pug b/services/web/app/views/project/editor/left-menu.pug
index 311ae54058..de64b7c54a 100644
--- a/services/web/app/views/project/editor/left-menu.pug
+++ b/services/web/app/views/project/editor/left-menu.pug
@@ -170,7 +170,7 @@ aside#left-menu.full-size(
 					ng-model="fontSizeAsStr"
 					ng-model-options="{ getterSetter: true }"
 				)
-					each size in ['10','11','12','13','14','16','20','24']
+					each size in ['10','11','12','13','14','16','18','20','22','24']
 						option(value=size) #{size}px
 
 			.form-controls

From f3a4c7f2ed9a709a075fe4480a4b624314ad0919 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 28 Aug 2018 17:08:46 +0100
Subject: [PATCH 14/14] Remove debug line.

---
 .../web/app/coffee/Features/Project/ProjectController.coffee     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/services/web/app/coffee/Features/Project/ProjectController.coffee b/services/web/app/coffee/Features/Project/ProjectController.coffee
index b0e0156f3b..d2f15b4ba3 100644
--- a/services/web/app/coffee/Features/Project/ProjectController.coffee
+++ b/services/web/app/coffee/Features/Project/ProjectController.coffee
@@ -288,7 +288,6 @@ module.exports = ProjectController =
 					return cb()
 				CollaboratorsHandler.userIsTokenMember user_id, project_id, cb
 		}, (err, results)->
-			logger.log locals: res.locals, "### locals"
 			if err?
 				logger.err err:err, "error getting details for project page"
 				return next err