suliman's space

The Bearblog editor is simple, maybe a little too simple. The most complete addition to it I could find was the EasyMDE script which was unusable in dark mode. The below code is just me making it usable with a dark theme. To make it yours, you can just swap the colors in the root variables and everything will remain functioning as expected. This code should by added under https://bearblog.dev/dashboard/customise/.

css tweaks

/* Global Colors */
:root {
  --accent-color: #f4ede8;
  --background-color: #faf4ed;
  --heading-color: #907aa9;
  --text-color: #575279;
  --link-color: #f37375;
  --visited-color: #f5978c;
  --code-background-color: #fffaf3;
  --code-color: #222;
  --blockquote-color: #fffaf3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #21202e;
    --background-color: #191724;
    --heading-color: #c4a7e7;
    --text-color: #e0def4;
    --link-color: #ebbcba;
    --visited-color: #8b6fcb;
    --code-background-color: #1f1d2e;
    --code-color: #ddd;
    --blockquote-color: #1f1d2e;
  }
}

/* Tweaks */
.helptext.sticky,
.sticky-controls,
.editor-toolbar {
    background-color: var(--background-color) !important;
}
.editor-toolbar {
   border-top: 1px solid var(--accent-color) !important;
   border-left: 1px solid var(--accent-color) !important;
   border-right: 1px solid var(--accent-color) !important;
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
}
.editor-preview {
  background: var(--code-background-color) !important;
}
.CodeMirror {
    background: var(--blockquote-color) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--text-color) !important;
}
button.side-by-side,
button.fullscreen {
   display: none !important;
}
.EasyMDEContainer .editor-toolbar button {
  margin-right: 1px;
  border: 1px solid var(--accent-color) !important;
  border-radius: 4px;
  background-color: #faf4ed !important;
}
textarea, input:not([type="submit"]), .editable {
    background-color: var(--code-background-color);
}

"plugins" used

<!-- Easy Markdown Editor -->
<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
<script>new EasyMDE({element: document.getElementById('body_content')});</script>

<!-- Autosave my blog drafts (by ReedyBear)-->
<script type="text/javascript">
    const restore_btn = document.createElement('button');
    restore_btn.classList.add('rdb_post_restorer');
    restore_btn.setAttribute('onclick', "event.preventDefault();rdb_restore_post();");
    restore_btn.innerText = 'Restore Last Post';
    document.querySelector('.sticky-controls').appendChild(restore_btn);

    function rdb_restore_post(){
        var ebody = document.getElementById('body_content');
        var eheaders = document.getElementById('header_content');
      
        if (ebody.value.length > 30){
            if (!confirm("Overwrite your current post with previous post?"))return;
        }

        ebody.value= localStorage.getItem('body');
        eheaders.innerText = localStorage.getItem('headers');
    }
    function rdb_save_post(){
        setTimeout(function(){rdb_save_post();}, 10000);
        console.log(localStorage);
        var body = document.getElementById('body_content').value;
        var headers = document.getElementById('header_content').innerText;
        if (body.length < 50){
            console.log("Body less than 50 chars. Not saving.");
            return;
        }
        localStorage.setItem('body', body);
        localStorage.setItem('headers', headers);
        console.log("Post saved locally",localStorage);
    }
    setTimeout(function(){rdb_save_post();}, 10000);
</script>