(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();
}
});
});
});
/**
* The Dark Reader admin engine, when this page is running it.
*
* Where it is present it owns the TinyMCE frame: it reads the same
* localStorage key this button writes, so it paints the frame with the
* chosen palette and the hand-written stylesheet below is not only
* redundant but wrong — it hardcodes rgb(32,35,36) and skyblue links,
* ignoring the palette entirely.
*/
function darkifyEngine() {
const engine = window.darkifyAdminEngine;
return engine && typeof engine.reapply === "function" ? engine : null;
}
// Function to apply theme and save to localStorage
function applyDarkModeOnMCE() {
localStorage.setItem("darkify_classic_editor_mode", 1);
const engine = darkifyEngine();
if ( engine ) {
engine.reapply();
setButtonIcon(sunIcon);
return;
}
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 setButtonIcon(icon) {
const btnEl = document.querySelector('.mce-dark-mode-button');
if ( btnEl ) {
btnEl.innerHTML = icon;
}
}
function removeDarkModeOnMCE() {
localStorage.setItem("darkify_classic_editor_mode", 0);
const engine = darkifyEngine();
if ( engine ) {
engine.reapply();
setButtonIcon(moonIcon);
return;
}
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 engine = darkifyEngine();
// With no remembered choice, follow the admin. Seeding the key rather
// than just reading through to it keeps the button's icon honest: the
// engine defaults this frame to the admin state too, so leaving the key
// unset would show a moon over an already-dark frame.
if ( engine && localStorage.getItem("darkify_classic_editor_mode") === null ) {
localStorage.setItem("darkify_classic_editor_mode", engine.isDark() ? 1 : 0);
}
const savedMode = localStorage.getItem("darkify_classic_editor_mode") || 0;
if ( savedMode == 1 ) {
applyDarkModeOnMCE();
} else {
removeDarkModeOnMCE();
}
}
})();