Add lesser-dark theme

Raynes · Mar 5, 2012 · 18fa0b5 · 18fa0b5
1 parent 4f596ae
commit 18fa0b5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/demo/theme.html b/demo/theme.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="../theme/cobalt.css">
     <link rel="stylesheet" href="../theme/eclipse.css">
     <link rel="stylesheet" href="../theme/rubyblue.css">
+    <link rel="stylesheet" href="../theme/lesser-dark.css">
     <script src="../mode/javascript/javascript.js"></script>
     <link rel="stylesheet" href="../doc/docs.css">
 
@@ -44,6 +45,7 @@ <h1>CodeMirror: Theme demo</h1>
     <option>cobalt</option>
     <option>eclipse</option>
     <option>rubyblue</option>
+    <option>lesser-dark</option>
 </select>
 </p>
 

diff --git a/mode/less/index.html b/mode/less/index.html
@@ -7,6 +7,7 @@
     <script src="less.js"></script>
     <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style>
     <link rel="stylesheet" href="../../doc/docs.css">
+    <link rel="stylesheet" href="../../theme/lesser-dark.css">
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   </head>
   <body>
@@ -592,7 +593,9 @@ <h1>CodeMirror: LESS mode</h1>
 }
 </textarea></form>
     <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        theme: "lesser-dark"
+      });
     </script>
 
     <p><strong>MIME types defined:</strong> <code>text/less</code>.</p>

diff --git a/theme/lesser-dark.css b/theme/lesser-dark.css
@@ -0,0 +1,45 @@
+/*
+http://lesscss.org/ dark theme
+Ported to CodeMirror by Peter Kroon
+*/
+.CodeMirror{
+  line-height: 15px;
+}
+.cm-s-lesser-dark {
+  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
+  font-size:12px;
+}
+
+.cm-s-lesser-dark { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
+.cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/
+.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
+.cm-s-lesser-dark .CodeMirror-lines { margin-left:3px; margin-right:3px; }/*editable code holder*/
+
+div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
+
+.cm-s-lesser-dark .CodeMirror-gutter { background: #262626; border-right:1px solid #aaa; padding-right:3px; min-width:2.5em; }
+.cm-s-lesser-dark .CodeMirror-gutter-text { color: #777; }
+
+.cm-s-lesser-dark span.cm-keyword { color: #599eff; }
+.cm-s-lesser-dark span.cm-atom { color: #C2B470; }
+.cm-s-lesser-dark span.cm-number { color: #B35E4D; }
+.cm-s-lesser-dark span.cm-def {color: color: white;}
+.cm-s-lesser-dark span.cm-variable { color:#D9BF8C; }
+.cm-s-lesser-dark span.cm-variable-2 { color: #669199; }
+.cm-s-lesser-dark span.cm-variable-3 { color: white; }
+.cm-s-lesser-dark span.cm-property {color: black;}
+.cm-s-lesser-dark span.cm-operator {color: black;}
+.cm-s-lesser-dark span.cm-comment { color: #666; }
+.cm-s-lesser-dark span.cm-string { color: #BCD279; }
+.cm-s-lesser-dark span.cm-string-2 {color: #f50;}
+.cm-s-lesser-dark span.cm-meta { color: #738C73; }
+.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
+.cm-s-lesser-dark span.cm-qualifier {color: #555;}
+.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
+.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
+.cm-s-lesser-dark span.cm-tag { color: #669199; }
+.cm-s-lesser-dark span.cm-attribute {color: #00c;}
+.cm-s-lesser-dark span.cm-header {color: #a0a;}
+.cm-s-lesser-dark span.cm-quote {color: #090;}
+.cm-s-lesser-dark span.cm-hr {color: #999;}
+.cm-s-lesser-dark span.cm-link {color: #00c;}