Bootstrap the light theme.

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']

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

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
 

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

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;

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;
 		}
 	}
 

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);

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);