Question

How can I change the theme in the Ace editor on the change event from a select? I am able to programmatically set the theme on dom ready event. The code I am invoking (for both events) looks like below and I am passing values like (“ace/theme/clouds”/”ace/theme/clouds_midnight”).

setThemeValue = function(themeVal){
var editor = ace.edit("editor");
editor.setTheme(themeVal);
editor.getSession().setMode("ace/mode/javascript");
};

Answer 1

“setTheme” change the theme that you use on the fly, and you do not need to redo ace.edit(“editor”).

So I propose instead a code like this:

// Initialize your Ace Editor
var editor = (function() {
    var aceEditor = ace.edit("editor");
    // default theme
    aceEditor.setTheme("ace/theme/clouds");
    aceEditor.getSession().setMode("ace/mode/javascript");
    return aceEditor;
})();

// Change theme on the fly
editor.setTheme("ace/theme/clouds_midnight");