Merge pull request #855 from sharelatex/pr-v2-light-theme

v2 light theme

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/

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:
@@ -154,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"
@@ -164,10 +167,23 @@ 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"
 
+			'ol-light':
+				options:
+					sourceMap: true
+					sourceMapFilename: "public/stylesheets/ol-light-style.css.map"
+					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"
+
 		postcss:
 			options:
 				map: 
@@ -178,7 +194,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 +429,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/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.ace.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')

services/web/app/coffee/Features/User/UserController.coffee

@@ -68,8 +68,10 @@ 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.overallTheme?
+				user.ace.overallTheme = req.body.overallTheme
 			if req.body.fontSize?
 				user.ace.fontSize = req.body.fontSize
 			if req.body.autoComplete?

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,6 +164,14 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 				return Url.resolve(staticFilesBase, hashedPath)
 			return Url.resolve(staticFilesBase, path)
 
+		res.locals.buildCssFileNameForUser = (userSettings) ->
+			if userSettings?.overallTheme? and Settings.overleaf?
+				themeModifier = userSettings.overallTheme
+			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)
 			return Url.resolve(staticFilesBase, path)
@@ -334,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?

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}

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(buildCssFileNameForUser(userSettings), {hashedPath:true}), id="main-stylesheet")
 
 		block _headLinks
 

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

@@ -173,6 +173,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,

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",

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",

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",

services/web/app/views/project/editor/left-menu.pug

@@ -131,13 +131,27 @@ aside#left-menu.full-size(
 				)
 
 			.form-controls
-				label(for="theme") #{translate("theme")}
+				label(for="editorTheme") #{translate("editor_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") #{translate("overall_theme")}
+					select(
+						name="overallTheme"
+						ng-if="!ui.loadingStyleSheet"
+						ng-model="settings.overallTheme"
+						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")}
@@ -156,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

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

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"
 			
@@ -19,9 +37,16 @@ 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
+				chosenTheme = _.find $scope.overallThemesList, (theme) -> theme.val == overallTheme
+				if chosenTheme?
+					_updateCSSFile chosenTheme
+					settings.saveSettings({overallTheme})
 
 		$scope.$watch "settings.fontSize", (fontSize, oldFontSize) =>
 			if fontSize != oldFontSize

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
@@ -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

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;

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

services/web/public/stylesheets/app/editor/left-menu.less

@@ -100,7 +100,8 @@
 				// select.form-control {
 				// 	color: white;
 				// }
-				label {
+				label,
+				i.fa {
 					color: white;
 				}
 			}

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

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

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/app/project-list.less

@@ -169,10 +169,10 @@ ul.folders-menu {
 		border-radius: @sidebar-active-border-radius;
 		> a {
 			background-color: @sidebar-active-bg;
-			font-weight: 700;
-			color: white;
+			font-weight: @sidebar-active-font-weight;
+			color: @sidebar-active-color;
 			.subdued {
-				color: white;
+				color: @sidebar-active-color;
 			}
 		}
 	}

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

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

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;
@@ -796,6 +797,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);
@@ -834,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;
@@ -859,6 +861,8 @@
 @sidebar-link-color            : #333;
 @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;
 
@@ -966,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;

services/web/public/stylesheets/core/ol-light-variables.less

@@ -0,0 +1,122 @@
+// Styleguide colors
+@ol-blue-gray-0 : #F4F5FB;
+@ol-blue-gray-1 : #DFE2E8;
+@ol-blue-gray-2 : #9DA7B7;
+@ol-blue-gray-3 : #727E91;
+@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                      : #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;
+@file-tree-item-color            : @ol-blue-gray-3;
+@file-tree-item-selected-color   : #FFF;
+@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;
+@file-tree-multiselect-hover-bg  : @ol-dark-blue;
+@file-tree-droppable-bg-color    : tint(@ol-green, 5%);
+
+@content-alt-bg-color            : @ol-blue-gray-0;
+
+// Editor resizers
+@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-1;
+
+@toolbar-border-color            : @ol-blue-gray-1;
+@toolbar-alt-bg-color            : #FFF;
+@editor-toolbar-bg               : @toolbar-alt-bg-color;
+
+@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.svg) center / contain no-repeat;
+@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;

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;
@@ -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;
@@ -149,10 +150,14 @@
 @sidebar-link-color             : #FFF;
 @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;
 
@@ -214,6 +219,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;
@@ -230,6 +236,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;
@@ -276,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;
@@ -357,6 +365,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);

services/web/public/stylesheets/ol-light-style.less

@@ -0,0 +1,2 @@
+@import "ol-style.less";
+@import "core/ol-light-variables.less";

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
 

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.ace.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)->