use ext/themelist.js in kitchen-sink demo

demo/kitchen-sink/demo.js

@@ -65,6 +65,7 @@ var whitespace = require("ace/ext/whitespace");
 
 var doclist = require("./doclist");
 var modelist = require("ace/ext/modelist");
+var themelist = require("ace/ext/themelist");
 var layout = require("./layout");
 var TokenTooltip = require("./token_tooltip").TokenTooltip;
 var util = require("./util");
@@ -370,6 +371,12 @@ function updateUIEditorOptions() {
     saveOption(behavioursEl, editor.getBehavioursEnabled());
 }
 
+themelist.themes.forEach(function(x){ x.value = x.theme });
+fillDropdown(themeEl, {
+    Bright: themelist.themes.filter(function(x){return !x.isDark}),
+    Dark: themelist.themes.filter(function(x){return x.isDark}),
+});
+
 event.addListener(themeEl, "mouseover", function(e){
     themeEl.desiredValue = e.target.value;
     if (!themeEl.$timer)
@@ -383,7 +390,7 @@ event.addListener(themeEl, "mouseout", function(e){
 });
 
 themeEl.updateTheme = function(){
-    env.split.setTheme(themeEl.desiredValue || themeEl.selectedValue);
+    env.split.setTheme((themeEl.desiredValue || themeEl.selectedValue));
     themeEl.$timer = null;
 };
 
@@ -588,4 +595,4 @@ env.editor.setOptions({
     enableSnippets: true
 });
 
-});
+});

demo/kitchen-sink/util.js

@@ -218,7 +218,7 @@ function optgroup(values) {
     return values.map(function(item) {
         if (typeof item == "string")
             item = {name: item, caption: item};
-        return elt("option", {value: item.name}, item.caption || item.desc);
+        return elt("option", {value: item.value || item.name}, item.caption || item.desc);
     });
 }
 

kitchen-sink.html

@@ -63,40 +63,7 @@
         <label for="theme">Theme</label>
       </td><td>
         <select id="theme" size="1">
-          <optgroup label="Bright">
+          
-            <option value="ace/theme/chrome">Chrome</option>
-            <option value="ace/theme/clouds">Clouds</option>
-            <option value="ace/theme/crimson_editor">Crimson Editor</option>
-            <option value="ace/theme/dawn">Dawn</option>
-            <option value="ace/theme/dreamweaver">Dreamweaver</option>
-            <option value="ace/theme/eclipse">Eclipse</option>
-            <option value="ace/theme/github">GitHub</option>
-            <option value="ace/theme/solarized_light">Solarized Light</option>
-            <option value="ace/theme/textmate" selected="selected">TextMate</option>
-            <option value="ace/theme/tomorrow">Tomorrow</option>
-            <option value="ace/theme/xcode">XCode</option>
-          </optgroup>
-          <optgroup label="Dark">
-            <option value="ace/theme/ambiance">Ambiance</option>
-            <option value="ace/theme/chaos">Chaos</option>
-            <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
-            <option value="ace/theme/cobalt">Cobalt</option>
-            <option value="ace/theme/idle_fingers">idleFingers</option>
-            <option value="ace/theme/kr_theme">krTheme</option>
-            <option value="ace/theme/merbivore">Merbivore</option>
-            <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
-            <option value="ace/theme/mono_industrial">Mono Industrial</option>
-            <option value="ace/theme/monokai">Monokai</option>
-            <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
-            <option value="ace/theme/solarized_dark">Solarized Dark</option>
-            <option value="ace/theme/terminal">Terminal</option>
-            <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
-            <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
-            <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
-            <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
-            <option value="ace/theme/twilight">Twilight</option>    
-            <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
-          </optgroup>
         </select>
       </td>
     </tr>

lib/ace/ext/themelist.js

@@ -44,35 +44,57 @@
 define(function(require, exports, module) {
 "use strict";
 
+var themeData = [
+    ["Chrome"         ],
+    ["Clouds"         ],
+    ["Crimson Editor" ],
+    ["Dawn"           ],
+    ["Dreamweaver"    ],
+    ["Eclipse"        ],
+    ["GitHub"         ],
+    ["Solarized Light"],
+    ["TextMate"       ],
+    ["Tomorrow"       ],
+    ["XCode"          ],
+    ["Kuroir"],
+    ["KatzenMilch"],
+    ["Ambiance"             ,"ambiance"                ,  "dark"],
+    ["Chaos"                ,"chaos"                   ,  "dark"],
+    ["Clouds Midnight"      ,"clouds_midnight"         ,  "dark"],
+    ["Cobalt"               ,"cobalt"                  ,  "dark"],
+    ["idle Fingers"         ,"idle_fingers"            ,  "dark"],
+    ["krTheme"              ,"kr_theme"                ,  "dark"],
+    ["Merbivore"            ,"merbivore"               ,  "dark"],
+    ["Merbivore Soft"       ,"merbivore_soft"          ,  "dark"],
+    ["Mono Industrial"      ,"mono_industrial"         ,  "dark"],
+    ["Monokai"              ,"monokai"                 ,  "dark"],
+    ["Pastel on dark"       ,"pastel_on_dark"          ,  "dark"],
+    ["Solarized Dark"       ,"solarized_dark"          ,  "dark"],
+    ["Terminal"             ,"terminal"                ,  "dark"],
+    ["Tomorrow Night"       ,"tomorrow_night"          ,  "dark"],
+    ["Tomorrow Night Blue"  ,"tomorrow_night_blue"     ,  "dark"],
+    ["Tomorrow Night Bright","tomorrow_night_bright"   ,  "dark"],
+    ["Tomorrow Night 80s"   ,"tomorrow_night_eighties" ,  "dark"],
+    ["Twilight"             ,"twilight"                ,  "dark"],
+    ["Vibrant Ink"          ,"vibrant_ink"             ,  "dark"],
+]
+
+
+exports.themesByName = {};
+
 /**
  * An array containing information about available themes.
  */
-module.exports.themes = require('ace/ext/themelist_utils/themes').themes;
+exports.themes = themeData.map(function(data) {
-
+    var name = data[1] || data[0].replace(/ /g, "_").toLowerCase();
-/**
+    var theme = {
- * Creates a theme description.
+         caption: data[0],
- * @param {string} name The file name of the theme.
+         theme: "ace/theme/" + name,
- * @returns {ThemeDescription} Returns a theme description object which has
+         isDark: data[2] == "dark",
- *  three properties: the name gives the filename, the desc gives a menu
+         name: name
- *  friendly name, and the theme gives the string to set the theme with
+    };
- *  `setTheme`
+    exports.themesByName[name] = theme;
- */
+    return theme;
-module.exports.ThemeDescription = function(name) {
-    this.name = name;
-    this.desc = name.split('_'
-        ).map(
-            function(namePart) {
-                return namePart[0].toUpperCase() + namePart.slice(1);
-            }
-        ).join(' ');
-    this.theme = "ace/theme/" + name;
-};
-
-module.exports.themesByName = {};
-
-module.exports.themes = module.exports.themes.map(function(name) {
-    module.exports.themesByName[name] = new module.exports.ThemeDescription(name);
-    return module.exports.themesByName[name];
 });
 
 });

lib/ace/ext/themelist_utils/themes.js

@@ -1,36 +0,0 @@
-define(function(require, exports, module) {
-
-module.exports.themes = [
-    "ambiance",
-    "chaos",
-    "chrome",
-    "clouds",
-    "clouds_midnight",
-    "cobalt",
-    "crimson_editor",
-    "dawn",
-    "dreamweaver",
-    "eclipse",
-    "github",
-    "idle_fingers",
-    "kr_theme",
-    "merbivore",
-    "merbivore_soft",
-    "mono_industrial",
-    "monokai",
-    "pastel_on_dark",
-    "solarized_dark",
-    "solarized_light",
-    "terminal",
-    "textmate",
-    "tomorrow",
-    "tomorrow_night",
-    "tomorrow_night_blue",
-    "tomorrow_night_bright",
-    "tomorrow_night_eighties",
-    "twilight",
-    "vibrant_ink",
-    "xcode"
-];
-
-});