Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ace editor : How to dynamically change the theme

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");
};
like image 288
user35559 Avatar asked Dec 11 '22 22:12

user35559


1 Answers

"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");
like image 174
Hugeen Avatar answered Jan 18 '23 23:01

Hugeen