From 5f113410b5aa0c4874cbd1fd2cabae3e394cbb29 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Sun, 5 Mar 2017 00:10:21 +0530
Subject: [PATCH] theme options for editor! fixes #84
---
src/index.html | 56 ++++++++++++++-
src/lib/codemirror/theme/dracula.css | 7 +-
src/lib/codemirror/theme/material.css | 2 +-
src/lib/codemirror/theme/pastel-on-dark.css | 1 -
src/lib/codemirror/theme/solarized.css | 36 +++++-----
src/script.js | 75 ++++++++++++++++++---
src/style.css | 2 +-
7 files changed, 147 insertions(+), 32 deletions(-)
diff --git a/src/index.html b/src/index.html
index acefc0c..9cf1f59 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/lib/codemirror/theme/dracula.css b/src/lib/codemirror/theme/dracula.css
index 57f979a..53a660b 100644
--- a/src/lib/codemirror/theme/dracula.css
+++ b/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-keyword { color: #ff79c6; }
+.cm-s-dracula span.cm-def { color: #50fa7b; }
.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; }
diff --git a/src/lib/codemirror/theme/material.css b/src/lib/codemirror/theme/material.css
index 91ed6ce..01d8679 100644
--- a/src/lib/codemirror/theme/material.css
+++ b/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);
}
diff --git a/src/lib/codemirror/theme/pastel-on-dark.css b/src/lib/codemirror/theme/pastel-on-dark.css
index 7197509..2603d36 100644
--- a/src/lib/codemirror/theme/pastel-on-dark.css
+++ b/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); }
diff --git a/src/lib/codemirror/theme/solarized.css b/src/lib/codemirror/theme/solarized.css
index 7882c93..1f39c7e 100644
--- a/src/lib/codemirror/theme/solarized.css
+++ b/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;
- border-color: #00232c;
+ background-color: #073642;
}
.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;
- border-color: #eee8d5;
+ background-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; }
-/*
-Active line. Negative margin compensates left padding of the text in the
-view-port
-*/
+/* Fat cursor */
+.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
+.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);
}
diff --git a/src/script.js b/src/script.js
index 3abc5b0..f7b39fb 100644
--- a/src/script.js
+++ b/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(
- 'indentWithTabs',
- $('[data-setting=indentWith]:checked').value !== 'spaces'
- );
+ ['html', 'js', 'css'].forEach((type) => {
+ scope.cm[type].setOption(
+ 'indentWithTabs',
+ $('[data-setting=indentWith]:checked').value !== 'spaces'
+ );
- scope.cm.js.setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
- scope.cm.js.setOption('indentUnit', $('[data-setting=indentSize]').value);
- scope.cm.js.setOption('tabSize', $('[data-setting=indentSize]').value);
+ scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2 } : false);
+ scope.cm[type].setOption('indentUnit', $('[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);
}
diff --git a/src/style.css b/src/style.css
index 7e0b103..90093d6 100644
--- a/src/style.css
+++ b/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 {