如何在不使用setTheme()时监听Ace编辑器的主题变更事件

方法一：监听编辑器的changeOption事件 #

Ace编辑器在通过setOptions或setTheme修改主题时，会触发changeOption事件，我们可以通过判断变更的选项是否为theme来执行自定义逻辑：

var editor = ace.edit("editor");
ace.require("ace/ext/settings_menu").init(editor);
editor.session.setMode("ace/mode/java");
editor.setOptions({
    theme: "ace/theme/tomorrow_night_bright"
});

// 监听选项变更事件
editor.on('changeOption', function(e, optionName, newValue, oldValue) {
    if (optionName === 'theme') {
        console.log('主题已变更:', newValue);
        // 这里执行你的自定义逻辑
    }
});

这种方法的优势是无论主题是通过代码修改还是设置菜单切换，都会触发事件，覆盖所有场景。

方法二：直接绑定设置菜单的主题下拉框事件 #

如果只需要监听用户通过设置菜单手动切换主题的操作，可以直接定位到设置菜单生成的下拉框绑定事件。Ace的设置菜单会给主题下拉框添加data-setting="theme"属性，以此定位即可：

// 等待设置菜单渲染完成后绑定事件
setTimeout(function() {
    const themeSelect = document.querySelector('select[data-setting="theme"]');
    if (themeSelect) {
        themeSelect.addEventListener('change', function() {
            const newTheme = this.value;
            console.log('通过设置菜单切换主题:', newTheme);
            // 执行自定义逻辑
        });
    }
}, 100);

内容的提问来源于stack exchange，提问作者user22219493