Improve Demo

Author: Kacarott

demo/src/3024-night.css

@@ -8,32 +8,34 @@
 
 */
 
-.cm-s-3024-night.CodeMirror { background: #090300; color: #d6d5d4; }
-.cm-s-3024-night div.CodeMirror-selected { background: #3a3432; }
+.cm-s-3024-night.CodeMirror { background: #131414; color: #ccc; }
+.cm-s-3024-night div.CodeMirror-selected { background: #4a5964; }
 .cm-s-3024-night .CodeMirror-line::selection, .cm-s-3024-night .CodeMirror-line > span::selection, .cm-s-3024-night .CodeMirror-line > span > span::selection { background: rgba(58, 52, 50, .99); }
 .cm-s-3024-night .CodeMirror-line::-moz-selection, .cm-s-3024-night .CodeMirror-line > span::-moz-selection, .cm-s-3024-night .CodeMirror-line > span > span::-moz-selection { background: rgba(58, 52, 50, .99); }
-.cm-s-3024-night .CodeMirror-gutters { background: #090300; border-right: 0px; }
+.cm-s-3024-night .CodeMirror-gutters { background: #131414; border-right: 0px; }
 .cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; }
 .cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; }
-.cm-s-3024-night .CodeMirror-linenumber { color: #5c5855; }
+.cm-s-3024-night .CodeMirror-linenumber { color: #515151; }
 
-.cm-s-3024-night .CodeMirror-cursor { border-left: 1px solid #807d7c; }
+.cm-s-3024-night .CodeMirror-cursor { border-left: 1px solid #999; }
 
-.cm-s-3024-night span.cm-comment { color: #cdab53; }
-.cm-s-3024-night span.cm-atom { color: #a16a94; }
-.cm-s-3024-night span.cm-number { color: #a16a94; }
+.cm-s-3024-night span.cm-comment { color: #969896; }
+.cm-s-3024-night span.cm-atom { color: #dc7069; }
+.cm-s-3024-night span.cm-number { color: #de935f; }
 
-.cm-s-3024-night span.cm-property, .cm-s-3024-night span.cm-attribute { color: #01a252; }
-.cm-s-3024-night span.cm-keyword { color: #db2d20; }
-.cm-s-3024-night span.cm-string { color: #fded02; }
+.cm-s-3024-night span.cm-property { color: #81a2be; }
+.cm-s-3024-night span.cm-attribute { color: #dc7069; }
+.cm-s-3024-night span.cm-keyword { color: #b294bb; }
+.cm-s-3024-night span.cm-string { color: #b5bd68; }
 
-.cm-s-3024-night span.cm-variable { color: #01a252; }
-.cm-s-3024-night span.cm-variable-2 { color: #01a0e4; }
-.cm-s-3024-night span.cm-def { color: #e8bbd0; }
-.cm-s-3024-night span.cm-bracket { color: #d6d5d4; }
-.cm-s-3024-night span.cm-tag { color: #db2d20; }
+.cm-s-3024-night span.cm-variable { color: #eee; }
+.cm-s-3024-night span.cm-variable-2 { color: #89b6c5; }
+.cm-s-3024-night span.cm-variable-3 { color: #6abe79; }
+.cm-s-3024-night span.cm-def { color: #de935f; }
+.cm-s-3024-night span.cm-bracket { color: #ccc; }
+.cm-s-3024-night span.cm-tag { color: #f0c674; }
 .cm-s-3024-night span.cm-link { color: #a16a94; }
-.cm-s-3024-night span.cm-error { background: #db2d20; color: #807d7c; }
+.cm-s-3024-night span.cm-error { background: #F2777a; color: #eee ; }
 
-.cm-s-3024-night .CodeMirror-activeline-background { background: #2F2F2F; }
-.cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
+.cm-s-3024-night .CodeMirror-activeline-background { background: hsla(0,0%,100%,0.05); }
+.cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: #ccc !important; }

demo/src/docs.css

@@ -5,11 +5,11 @@
   src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
 }
 
-body, html { margin: 0; padding: 0; height: 100%; }
+body, html { margin: 0; padding: 0; height: 100%; color: #fff; }
 section, article { display: block; padding: 0; }
 
 body {
-  background: #f8f8f8;
+  background: #303133;
   font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
   line-height: 1.5;
 }
@@ -23,18 +23,18 @@ h2, h3, h1 {
 h1 { font-size: 140%; }
 h2 { font-size: 120%; }
 h3 { font-size: 110%; }
-article > h2:first-child, section:first-child > h2 { margin-top: 0; }
+article > h2:first-child, section:first-child > h2 { margin-top: 0; color: #fff; }
 
 #nav h1 {
   margin-right: 12px;
   margin-top: 0;
   margin-bottom: 2px;
-  color: #d30707;
+  color: #fff;
   letter-spacing: .5px;
 }
 
 a, a:visited, a:link, .quasilink {
-  color: #A21313;
+  color: #fff;
 }
 
 em {
@@ -48,10 +48,8 @@ em {
 article {
   max-width: 700px;
   margin: 0 0 0 160px;
-  border-left: 2px solid #E30808;
-  border-right: 1px solid #ddd;
   padding: 30px 50px 100px 50px;
-  background: white;
+  background: #262729;
   z-index: 2;
   position: relative;
   min-height: 100%;
@@ -114,14 +112,13 @@ article {
 }
 
 #nav ul a {
-  color: black;
+  color: #fff;
   padding: 0 7px 1px 11px;
 }
 
 #nav ul a.active, #nav ul a:hover {
-  border-bottom: 1px solid #E30808;
   margin-bottom: -1px;
-  color: #E30808;
+  color: #fff;
 }
 
 #logo {
@@ -131,7 +128,7 @@ article {
 }
 
 section {
-  border-top: 1px solid #E30808;
+  border-top: 1px solid #fff;
   margin: 1.5em 0;
 }
 
@@ -193,7 +190,7 @@ section.first {
 }
 
 .actionlink.fund {
-  color: #b00;
+  color: #fff;
   left: 50%;
   margin-left: 15px;
 }
@@ -262,11 +259,12 @@ pre {
 
 code {
   padding: 0 2px;
+  color: #fff ;
 }
 
 strong {
-  text-decoration: underline;
   font-weight: normal;
+  color: #fff ;
 }
 
 .field {

lambdacalc.js

@@ -16,17 +16,17 @@
 CodeMirror.defineMode("lambdacalc", function(_config, modeConfig) {
 
   // Modes for different types of symbols
-  const DEFNAME = "builtin";
+  const DEFNAME = "variable-2";
   const EQUALS = "text";
   const BRACKETS = "bracket";
-  const LAMBDA = "atom";
+  const LAMBDA = "keyword";
   const DOT = LAMBDA;
-  const PREDEF = "text";
+  const PREDEF = "variable";
   const BOUND = "text";
-  const ARGS = "variable";
-  const HOLE = "variable-2";
+  const ARGS = "def";
+  const HOLE = "atom";
   const NUMBER = "number";
-  const EMPTY = "variable-3";
+  const EMPTY = "text";
   const UNDEF = "error";
   const REDEF = "error";
   const FAIL = "error";