Style activeline + matchingbrackets with the CSS themes.

demo/theme.html

@@ -32,6 +32,8 @@
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <script src="../keymap/extra.js"></script>
+<script src="../addon/selection/active-line.js"></script>
+<script src="../addon/edit/matchbrackets.js"></script>
 <style type="text/css">
       .CodeMirror {border: 1px solid black; font-size:13px}
     </style>
@@ -96,7 +98,9 @@ function findSequence(goal) {
 
 <script>
   var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-    lineNumbers: true
+    lineNumbers: true,
+    styleActiveLine: true,
+    matchBrackets: true
   });
   var input = document.getElementById("select");
   function selectTheme() {

theme/3024-day.css

@@ -30,4 +30,5 @@
 .cm-s-3024-day span.cm-tag {color: #db2d20;}
 .cm-s-3024-day span.cm-link {color: #a16a94;}
 
+.cm-s-3024-day .CodeMirror-activeline-background {background: #e8f2ff !important;}
 .cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/3024-night.css

@@ -30,4 +30,5 @@
 .cm-s-3024-night span.cm-tag {color: #db2d20;}
 .cm-s-3024-night span.cm-link {color: #a16a94;}
 
+.cm-s-3024-night .CodeMirror-activeline-background {background: #2F2F2F !important;}
 .cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/base16-dark.css

@@ -30,4 +30,5 @@
 .cm-s-base16-dark span.cm-tag {color: #ac4142;}
 .cm-s-base16-dark span.cm-link {color: #aa759f;}
 
+.cm-s-base16-dark .CodeMirror-activeline-background {background: #2F2F2F !important;}
 .cm-s-base16-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/base16-light.css

@@ -30,4 +30,5 @@
 .cm-s-base16-light span.cm-tag {color: #ac4142;}
 .cm-s-base16-light span.cm-link {color: #aa759f;}
 
+.cm-s-base16-light .CodeMirror-activeline-background {background: #DDDCDC !important;}
 .cm-s-base16-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/blackboard.css

@@ -23,3 +23,6 @@
 .cm-s-blackboard .cm-header { color: #FF6400; }
 .cm-s-blackboard .cm-hr { color: #AEAEAE; }
 .cm-s-blackboard .cm-link { color: #8DA6CE; }
+
+.cm-s-blackboard .CodeMirror-activeline-background {background: #3C3636 !important;}
+.cm-s-blackboard .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}
\ No newline at end of file

theme/cobalt.css

@@ -16,3 +16,6 @@
 .cm-s-cobalt span.cm-bracket { color: #d8d8d8; }
 .cm-s-cobalt span.cm-builtin, .cm-s-cobalt span.cm-special { color: #ff9e59; }
 .cm-s-cobalt span.cm-link { color: #845dc4; }
+
+.cm-s-cobalt .CodeMirror-activeline-background {background: #002D57 !important;}
+.cm-s-cobalt .CodeMirror-matchingbracket {outline:1px solid grey;color:white !important}

theme/eclipse.css

@@ -19,7 +19,5 @@
 .cm-s-eclipse span.cm-attribute {color: #00c;}
 .cm-s-eclipse span.cm-link {color: #219;}
 
-.cm-s-eclipse .CodeMirror-matchingbracket {
-	outline:1px solid grey;
-	color:black !important;
-}
+.cm-s-eclipse .CodeMirror-activeline-background {background: #e8f2ff !important;}
+.cm-s-eclipse .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}

theme/elegant.css

@@ -8,3 +8,6 @@
 .cm-s-elegant span.cm-builtin {color: #30a;}
 .cm-s-elegant span.cm-error {background-color: #fdd;}
 .cm-s-elegant span.cm-link {color: #762;}
+
+.cm-s-elegant .CodeMirror-activeline-background {background: #e8f2ff !important;}
+.cm-s-elegant .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}

theme/erlang-dark.css

@@ -19,3 +19,6 @@
 .cm-s-erlang-dark span.cm-tag        { color: #9effff; }
 .cm-s-erlang-dark span.cm-variable   { color: #50fe50; }
 .cm-s-erlang-dark span.cm-variable-2 { color: #e0e; }
+
+.cm-s-erlang-dark .CodeMirror-activeline-background {background: #013461 !important;}
+.cm-s-erlang-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}

theme/lesser-dark.css

@@ -42,3 +42,6 @@ Ported to CodeMirror by Peter Kroon
 .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;}
+
+.cm-s-lesser-dark .CodeMirror-activeline-background {background: #3C3A3A !important;}
+.cm-s-lesser-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}

theme/midnight.css

@@ -37,6 +37,7 @@
 .cm-s-midnight span.cm-tag {color: #008;}
 .cm-s-midnight span.cm-link {color: #AE81FF;}
 
+.cm-s-midnight .CodeMirror-activeline-background {background: #192741 !important;}
 .cm-s-midnight .CodeMirror-matchingbracket {
   text-decoration: underline;
   color: white !important;

theme/monokai.css

@@ -22,6 +22,7 @@
 .cm-s-monokai span.cm-tag {color: #f92672;}
 .cm-s-monokai span.cm-link {color: #ae81ff;}
 
+.cm-s-monokai .CodeMirror-activeline-background {background: #373831 !important;}
 .cm-s-monokai .CodeMirror-matchingbracket {
   text-decoration: underline;
   color: white !important;

theme/neat.css

@@ -7,3 +7,6 @@
 .cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; }
 .cm-s-neat span.cm-meta {color: #555;}
 .cm-s-neat span.cm-link { color: #3a3; }
+
+.cm-s-neat .CodeMirror-activeline-background {background: #e8f2ff !important;}
+.cm-s-neat .CodeMirror-matchingbracket {outline:1px solid grey; color:black !important;}

theme/night.css

@@ -19,3 +19,6 @@
 .cm-s-night span.cm-comment { color: #6900a1; }
 .cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }
 .cm-s-night span.cm-link { color: #845dc4; }
+
+.cm-s-night .CodeMirror-activeline-background {background: #1C005A !important;}
+.cm-s-night .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}

theme/paraiso-dark.css

@@ -30,4 +30,5 @@
 .cm-s-paraiso-dark span.cm-tag {color: #ef6155;}
 .cm-s-paraiso-dark span.cm-link {color: #815ba4;}
 
+.cm-s-paraiso-dark .CodeMirror-activeline-background {background: #4D344A !important;}
 .cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/paraiso-light.css

@@ -30,4 +30,5 @@
 .cm-s-paraiso-light span.cm-tag {color: #ef6155;}
 .cm-s-paraiso-light span.cm-link {color: #815ba4;}
 
+.cm-s-paraiso-light .CodeMirror-activeline-background {background: #CFD1C4 !important;}
 .cm-s-paraiso-light .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}

theme/rubyblue.css

@@ -19,3 +19,5 @@
 .cm-s-rubyblue span.cm-link { color: #F4C20B; }
 .cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; }
 .cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; }
+
+.cm-s-rubyblue .CodeMirror-activeline-background {background: #173047 !important;}