(function () {
const moonIcon = ``;
const sunIcon = ``;
tinymce.PluginManager.add('darkify_button', function (editor, url) {
editor.addButton('darkify_button', {
text: ``,
icon: 'darkify_button',
tooltip: 'Toggle Dark Mode',
onclick: function () {
let currentMode = localStorage.getItem("darkify_classic_editor_mode") || 0;
if ( currentMode == 1 ) {
removeDarkModeOnMCE();
} else {
applyDarkModeOnMCE();
}
},
onPostRender: function () {
// inject icon manually after rendering
const btnEl = this.getEl();
const savedMode = localStorage.getItem("darkify_classic_editor_mode") || "0";
btnEl.innerHTML = ''
}
});
editor.on('init', function () {
initDarkModeOnMCE();
document.addEventListener('darkify', ( event ) => {
if ( event.detail.isActive ) {
applyDarkModeOnMCE();
} else {
removeDarkModeOnMCE();
}
});
});
});
// Function to apply theme and save to localStorage
function applyDarkModeOnMCE() {
localStorage.setItem("darkify_classic_editor_mode", 1);
const iframe = document.querySelector('.mce-container-body iframe');
if ( iframe ) {
// Add css to iframe.
const css = `body { background-color: rgb(32, 35, 36);
color: #f0f0f0 !important;
width: 100% !important;
font-size: inherit !important;
margin: inherit !important;
}
a {
color: skyblue !important;
}
`;
const style = document.createElement('style');
style.textContent = css;
style.id = 'wp-dark-mode-classic-editor-style';
iframe.contentDocument.head.appendChild(style);
}
// Update the button icon.
const btnEl = document.querySelector('.mce-dark-mode-button');
if ( btnEl ) {
btnEl.innerHTML = sunIcon
}
}
function removeDarkModeOnMCE() {
localStorage.setItem("darkify_classic_editor_mode", 0);
const iframe = document.querySelector('.mce-container-body iframe');
if ( iframe ) {
// Search the style inside the iframe.
const style = iframe.contentDocument.querySelector('#wp-dark-mode-classic-editor-style');
if ( style ) {
style.remove();
}
}
// Update the button icon.
const btnEl = document.querySelector('.mce-dark-mode-button');
if ( btnEl ) {
btnEl.innerHTML = moonIcon;
}
}
// Initialize Classic Editor Dark Mode.
const initDarkModeOnMCE = () => {
const savedMode = localStorage.getItem("darkify_classic_editor_mode") || 0;
if ( savedMode == 1 ) {
applyDarkModeOnMCE();
} else {
removeDarkModeOnMCE();
}
}
})();