theme options for editor! fixes #84

src/index.html

@@ -3,7 +3,55 @@
 		<meta charset="utf-8">
 		<title>Web Maker</title>
 		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
-		<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
+
+		<link rel="stylesheet" href="/lib/codemirror/theme/3024-day.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/3024-night.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/abcdef.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/ambiance.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/base16-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/base16-light.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/bespin.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/blackboard.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/cobalt.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/colorforth.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/dracula.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/duotone-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/duotone-light.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/eclipse.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/elegant.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/erlang-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/hopscotch.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/icecoder.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/isotope.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/lesser-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/liquibyte.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/material.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/mbo.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/mdn-like.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/midnight.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/monokai.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/neat.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/neo.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/night.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/panda-syntax.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/paraiso-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/paraiso-light.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/pastel-on-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/railscasts.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/rubyblue.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/seti.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/solarized.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/the-matrix.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/tomorrow-night-bright.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/tomorrow-night-eighties.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/ttcn.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/twilight.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/vibrant-ink.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/xq-dark.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/xq-light.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/yeti.css"></link>
+		<link rel="stylesheet" href="/lib/codemirror/theme/zenburn.css"></link>
+
 		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
 		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
 		<link rel="stylesheet" href="lib/hint.min.css">
@@ -315,7 +363,7 @@
 				</p>
 				<hr>
 
-				<h3>Editing</h3>
+				<h3>Editor</h3>
 				<p>
 					<label class="line">
 						Default Preprocessors
@@ -340,6 +388,10 @@
 							<option value="typescript">TypeScript</option>
 						</select>
 					</div>
+					<label class="line">
+						Theme
+						<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
+					</label>
 					<label class="line">
 						<input type="checkbox" d-change="updateSetting" data-setting="preserveLastCode"> Preserve last written code
 					</label>

src/lib/codemirror/theme/dracula.css

@@ -16,7 +16,7 @@
 .cm-s-dracula .CodeMirror-gutters { color: #282a36; }
 .cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
 .cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
-.cm-s-dracula.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-dracula .CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
 .cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
 .cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
 .cm-s-dracula span.cm-comment { color: #6272a4; }
@@ -24,8 +24,7 @@
 .cm-s-dracula span.cm-number { color: #bd93f9; }
 .cm-s-dracula span.cm-variable { color: #50fa7b; }
 .cm-s-dracula span.cm-variable-2 { color: white; }
-.cm-s-dracula span.cm-def { color: #ffb86c; }
+.cm-s-dracula span.cm-def { color: #50fa7b; }
-.cm-s-dracula span.cm-keyword { color: #ff79c6; }
 .cm-s-dracula span.cm-operator { color: #ff79c6; }
 .cm-s-dracula span.cm-keyword { color: #ff79c6; }
 .cm-s-dracula span.cm-atom { color: #bd93f9; }
@@ -35,7 +34,7 @@
 .cm-s-dracula span.cm-qualifier { color: #50fa7b; }
 .cm-s-dracula span.cm-property { color: #66d9ef; }
 .cm-s-dracula span.cm-builtin { color: #50fa7b; }
-.cm-s-dracula span.cm-variable-3 { color: #50fa7b; }
+.cm-s-dracula span.cm-variable-3 { color: #ffb86c; }
 
 .cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
 .cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

src/lib/codemirror/theme/material.css

@@ -7,7 +7,7 @@
 
 */
 
-.cm-s-material {
+.cm-s-material.CodeMirror {
   background-color: #263238;
   color: rgba(233, 237, 237, 1);
 }

src/lib/codemirror/theme/pastel-on-dark.css

@@ -11,7 +11,6 @@
 	background: #2c2827;
 	color: #8F938F;
 	line-height: 1.5;
-	font-size: 14px;
 }
 .cm-s-pastel-on-dark div.CodeMirror-selected { background: rgba(221,240,255,0.2); }
 .cm-s-pastel-on-dark .CodeMirror-line::selection, .cm-s-pastel-on-dark .CodeMirror-line > span::selection, .cm-s-pastel-on-dark .CodeMirror-line > span > span::selection { background: rgba(221,240,255,0.2); }

src/lib/codemirror/theme/solarized.css

@@ -4,7 +4,7 @@ http://ethanschoonover.com/solarized
 */
 
 /*
-Solarized color pallet
+Solarized color palette
 http://ethanschoonover.com/solarized/img/solarized-palette.png
 */
 
@@ -34,7 +34,7 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
 }
 .cm-s-solarized.cm-s-dark {
   color: #839496;
-  background-color:  #002b36;
+  background-color: #002b36;
   text-shadow: #002b36 0 1px;
 }
 .cm-s-solarized.cm-s-light {
@@ -113,32 +113,34 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
   box-shadow: inset 7px 0 12px -6px #000;
 }
 
-/* Gutter border and some shadow from it  */
+/* Remove gutter border */
 .cm-s-solarized .CodeMirror-gutters {
-  border-right: 1px solid;
+  border-right: 0;
 }
 
 /* Gutter colors and line number styling based of color scheme (dark / light) */
 
 /* Dark */
 .cm-s-solarized.cm-s-dark .CodeMirror-gutters {
-  background-color:  #002b36;
+  background-color: #073642;
-  border-color: #00232c;
 }
 
 .cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
+  color: #586e75;
   text-shadow: #021014 0 -1px;
 }
 
 /* Light */
 .cm-s-solarized.cm-s-light .CodeMirror-gutters {
-  background-color: #fdf6e3;
+  background-color: #eee8d5;
-  border-color: #eee8d5;
+}
+
+.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
+  color: #839496;
 }
 
 /* Common */
 .cm-s-solarized .CodeMirror-linenumber {
-  color: #586e75;
   padding: 0 5px;
 }
 .cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
@@ -149,15 +151,19 @@ http://ethanschoonover.com/solarized/img/solarized-palette.png
   color: #586e75;
 }
 
+/* Cursor */
 .cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }
 
-/*
+/* Fat cursor */
-Active line. Negative margin compensates left padding of the text in the
+.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
-view-port
+.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
-*/
+.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
+.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }
+
+/* Active line */
 .cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
-  background: rgba(255, 255, 255, 0.10);
+  background: rgba(255, 255, 255, 0.06);
 }
 .cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
-  background: rgba(0, 0, 0, 0.10);
+  background: rgba(0, 0, 0, 0.06);
 }

src/script.js

@@ -1142,6 +1142,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 		$('[data-setting=indentSize]').value = prefs.indentSize;
 		$('[data-setting=indentWith][value=' + (prefs.indentWith || 'spaces') + ']').checked = true;
 		$('[data-setting=isCodeBlastOn]').checked = prefs.isCodeBlastOn;
+		$('[data-setting=editorTheme]').value = prefs.editorTheme;
 	}
 
 	scope.updateSetting = function updateSetting(e) {
@@ -1157,14 +1158,17 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			});
 		}
 
-		scope.cm.js.setOption(
+		['html', 'js', 'css'].forEach((type) => {
-			'indentWithTabs',
+			scope.cm[type].setOption(
-			$('[data-setting=indentWith]:checked').value !== 'spaces'
+				'indentWithTabs',
-		);
+				$('[data-setting=indentWith]:checked').value !== 'spaces'
+			);
 
-		scope.cm.js.setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
+			scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
-		scope.cm.js.setOption('indentUnit', $('[data-setting=indentSize]').value);
+			scope.cm[type].setOption('indentUnit', $('[data-setting=indentSize]').value);
-		scope.cm.js.setOption('tabSize', $('[data-setting=indentSize]').value);
+			scope.cm[type].setOption('tabSize', $('[data-setting=indentSize]').value);
+			scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
+		});
 	};
 
 	function compileNodes() {
@@ -1430,7 +1434,8 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			cssMode: 'css',
 			isCodeBlastOn: false,
 			indentWith: 'spaces',
-			indentSize: 2
+			indentSize: 2,
+			editorTheme: 'monokai'
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				unsavedEditCount = 0;
@@ -1456,6 +1461,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			prefs.isCodeBlastOn = result.isCodeBlastOn;
 			prefs.indentSize = result.indentSize;
 			prefs.indentWith = result.indentWith;
+			prefs.editorTheme = result.editorTheme;
 
 			updateSettingsInUi();
 			scope.updateSetting();
@@ -1488,6 +1494,59 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete */
 			}
 		});
 
+		var options = '';
+		[
+			'selected>default',
+			'3024-day',
+			'3024-night',
+			'abcdef',
+			'ambiance',
+			'base16-dark',
+			'base16-light',
+			'bespin',
+			'blackboard',
+			'cobalt',
+			'colorforth',
+			'dracula',
+			'duotone-dark',
+			'duotone-light',
+			'eclipse',
+			'elegant',
+			'erlang-dark',
+			'hopscotch',
+			'icecoder',
+			'isotope',
+			'lesser-dark',
+			'liquibyte',
+			'material',
+			'mbo',
+			'mdn-like',
+			'midnight',
+			'monokai',
+			'neat',
+			'neo',
+			'night',
+			'panda-syntax',
+			'paraiso-dark',
+			'paraiso-light',
+			'pastel-on-dark',
+			'railscasts',
+			'rubyblue',
+			'seti',
+			'solarized dark',
+			'solarized light',
+			'the-matrix',
+			'tomorrow-night-bright',
+			'tomorrow-night-eighties',
+			'ttcn',
+			'twilight',
+			'vibrant-ink',
+			'xq-dark',
+			'xq-light',
+			'yeti',
+			'zenburn'
+		].forEach((theme) => { options += '<option value="' + theme + '">' + theme + '</option>'; });
+		document.querySelector('[data-setting="editorTheme"]').innerHTML = options;
 
 		requestAnimationFrame(compileNodes);
 	}

src/style.css

@@ -229,7 +229,7 @@ select, input[type="text"], textarea {
 .cm-s-monokai .CodeMirror-guttermarker-subtle {
 	opacity: 0.4;
 }
-.CodeMirror-activeline-background, .CodeMirror-activeline-gutter {
+.cm-s-monokai .CodeMirror-activeline-background, .cm-s-monokai .CodeMirror-activeline-gutter {
 	background: rgba(0,0,0,0.1) !important;
 }
 .CodeMirror-guttermarker-subtle {