Load theme as a user setting; allow the user to change it; update tests.

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

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

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)

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

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
 

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

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/editor/directives/aceEditor/highlights/HighlightsManager.coffee

@@ -28,6 +28,7 @@ define [
 				@redrawAnnotations()
 
 			@$scope.$watch "theme", (value) =>
+				console.log value
 				@redrawAnnotations()
 
 			@editor.on "mousemove", (e) =>

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

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