enable dark mode in tinymce
Here we have a darkmode verion of tinymce, ahh my eyes feel much better.
The change to version 5 seems quite easy as well, as it uses the same init script as 4 still.
You need to also include the oxide dark theme css files as well for this to work.
It even seems to use the same colour scheme as this site does in dark mode!
HTML
<h2>Add a button to enable the editor</h2>
<p>or you can load it when the doc is ready, on page load</p>
<button class="btn btn-primary mr-1" onclick="load_tinymce_dark('#tinymce-dark');">Load TinyMCE</button>
<button class="btn btn-primary mr-1" onclick="tinymce.remove('textarea');">Remove TinyMCE</button>
<h2>The Editor Textarea</h2>
<textarea id="tinymce-dark"></textarea>Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide/content.min.css" integrity="sha512-U8A/twP2qv8LP/I9jf9GOI6FioG4BhrB1yMkT6Z+5UI44Z5qhuVeR5Pnh4NATpPPmaPP34gm6GV1roiejydBYQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/skins/ui/oxide-dark/skin.min.css" integrity="sha512-r3IXhPGM2XA8Yqjv5SKfx/3FNWSaAtk6h1TbZh2Oz38Mp+xO1zRGMu2Ek/IF870FyMV2f1Gq5og5i3wYEC5W8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.6.2/tinymce.min.js" integrity="sha512-sOO7yng64iQzv/uLE8sCEhca7yet+D6vPGDEdXCqit1elBUAJD1jYIYqz0ov9HMd/k30e4UVFAovmSG92E995A==" crossorigin="anonymous"></script>Javascript
function load_tinymce_dark(idclass) {
tinymce.init({
selector: idclass,
plugins: [ "spellchecker code autolink link image fullscreen searchreplace wordcount visualblocks visualchars insertdatetime media table paste textcolor textpattern emoticons media lists" ],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink image | code | forecolor backcolor | emoticons",
image_advtab: true,
skin: "oxide-dark",
content_css: "dark",
height: 400,
/* content_css : "/css/style.css", */
relative_urls: false,
convert_urls: false,
remove_script_host : false
});
}Add a button to enable the editor
or you can load it when the doc is ready, on page load