Change handling of theme strings to allow multiple classes

Author: marijnh

lib/codemirror.js

@@ -24,7 +24,7 @@ var CodeMirror = (function() {
       '<div style="overflow: hidden; position: relative; width: 1px; height: 0px;">' + // Wraps and hides input textarea
         '<textarea style="position: absolute; padding: 0; width: 1px;" wrap="off" ' +
           'autocorrect="off" autocapitalize="off"></textarea></div>' +
-      '<div class="CodeMirror-scroll cm-s-' + options.theme + '">' +
+      '<div class="CodeMirror-scroll">' +
         '<div style="position: relative">' + // Set to the height of the text, causes scrolling
           '<div style="position: relative">' + // Moved around its parent to cover visible view
             '<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>' +
@@ -41,6 +41,7 @@ var CodeMirror = (function() {
         mover = code.firstChild, gutter = mover.firstChild, gutterText = gutter.firstChild,
         lineSpace = gutter.nextSibling.firstChild, measure = lineSpace.firstChild,
         cursor = measure.nextSibling, lineDiv = cursor.nextSibling;
+    themeChanged();
     // Needed to hide big blue blinking cursor on Mobile Safari
     if (/AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent)) input.style.width = "0px";
     if (!webkit) lineSpace.draggable = true;
@@ -140,7 +141,7 @@ var CodeMirror = (function() {
         options[option] = value;
         if (option == "mode" || option == "indentUnit") loadMode();
         else if (option == "readOnly" && value) {onBlur(); input.blur();}
-        else if (option == "theme") scroller.className = scroller.className.replace(/cm-s-\w+/, "cm-s-" + value);
+        else if (option == "theme") themeChanged();
         else if (option == "lineWrapping" && oldVal != value) operation(wrappingChanged)();
         else if (option == "tabSize") operation(tabsChanged)();
         if (option == "lineNumbers" || option == "gutter" || option == "firstLineNumber" || option == "theme")
@@ -1188,6 +1189,10 @@ var CodeMirror = (function() {
       tabText = computeTabText();
       updateDisplay(true);
     }
+    function themeChanged() {
+      scroller.className = scroller.className.replace(/\s*cm-s-\w+/g, "") +
+        options.theme.replace(/(^|\s)\s*/g, " cm-s-");
+    }
 
     function TextMarker() { this.set = []; }
     TextMarker.prototype.clear = operation(function() {

manual.html

@@ -131,7 +131,12 @@ <h2 id="config">Configuration</h2>
       CSS file defining the corresponding <code>.cm-s-[name]</code>
       styles is loaded (see
       the <a href="theme/"><code>theme</code></a> directory in the
-      distribution).</dd>
+      distribution). The default is <code>"default"</code>, for which
+      colors are included in <code>codemirror.css</code>. It is
+      possible to use multiple theming classes at once—for
+      example <code>"foo bar"</code> will assign both
+      the <code>cm-s-foo</code> and the <code>cm-s-bar</code> classes
+      to the editor.</dd>
 
       <dt id="option_indentUnit"><code>indentUnit (integer)</code></dt>
       <dd>How many spaces a block (whatever that means in the edited