Switch themes at runtime.

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

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?

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
 

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,

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

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

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

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