Dynamically Changing Theme

[leadhkr]

It's great that tinymce supports dark/light mode and it works beautifully. Is there a way to make this change dynamic without having to refresh the page? I have a global var that flips from light to dark theme as the user pushes a button. That choice doesn't reload the editor when changed (whether there's a state change or not).

Thanks

[ikokollari]

This is to spare anyone else from wasting hours trying to achieve this.

If you follow Create a skin for TinyMCE and browse the less theme
you will realize that there is no easy way to create a skin that would respond, say, to a .dark class change, or implement css variables.

The skin css is injected in the document head, while the content_css depends whether the editor is rendered inline or iframe.

One clunky solution for me was to replace the injected css when the theme changed like:

Warning

PSEUDOCODE

useEffect(() => {
   document.head.querySelectorAll("[id^='someId']").remove();
   const link = document.createElement('link');
  link.href = 'url-to-skin.css';
  document.head.append(link);
}, [theme]);

With this method you soon realize that different skins have more than one stylesheet, so ....

I settled with re-initializing the editor anytime the theme changed. Like the following:

Caution

This will destroy the UndoManager state
And this was only tested Using the TinyMCE React component as a uncontrolled component

const Editor: React.FC = () => {

    const editorRef = useRef<TinyMCEEditor | null>(null);
    const { theme } = useTheme();

    const init = useMemo(() => {
        return {
            ...defaultSettings,
            skin: theme === 'dark' ? 'oxide-dark' : 'oxide',
            content_css: theme === 'dark' ? 'dark' : 'default',
        }
    }, [theme]);

    useEffect(() => {
        if (editorRef.current) {
            const editor = editorRef.current;
            const content = editor.getContent();

            const editorID = editor.id;
            tinymce.execCommand('mceRemoveEditor', false, { id: editorID });
            tinymce.execCommand('mceAddEditor', false, { id: editorID, options: init });

            editorRef.current = tinymce.get(editorID)!;
            editorRef.current.setContent(content);
        }
    }, [theme, init])

return <TinyMCEComponent
    onInit=(evt, editor) => editorRef.current = editor}
    init={init}
    ref={ref}
    tinymceScriptSrc='node_modules/tinymce/tinymce.min.js' // link to where you are hosting your copy of tinymce.
    licenseKey='gpl'
/>;
}

Where theme: 'dark' | 'light'

There is some flickering, but this is more time proof. And hopefully you only have one instance of the editor that needs reloading :)