Dark Background?

[httpjamesm]

How do I set my background to another color using CSS/JS? The other dark mode thread did not help me.

[lexterror]

I would like it too!

[CaptainStealthy]

Anyone find a solution for this?

[CaptainStealthy]

I was able to work around the issue with the following CSS... I'm posting this with the disclaimer that I am not skilled with CSS/design (think the famous Peter Griffin GIF...) whatsoever, so feel free to modify this snippet if I've written it like an idiot.

It may look hacky to those more skilled than I, but it works for my purposes. 😝

(replace my scss color variables with your own color vars/color codes as you see fit)

.EasyMDEContainer {
    background-color: $gray-800 !important;
}

.CodeMirror, .editor-preview {
    color: $white !important;
    border-color: $gray-600 !important;
    background-color: $gray-800 !important;
}

.cm-s-easymde .CodeMirror-cursor {
    border-color: $gray-600 !important;
}

.editor-toolbar button i {
    color: $white !important;
}

.editor-toolbar button.active, .editor-toolbar button:hover {
    background-color: $blue !important; // Fixes toolbar buttons from appearing as white when hovered or selected
}

.editor-preview pre {
    background-color: #333 !important; // This fixes code blocks in Markdown appearing with a white background
}

[chrisspiegl]

@CaptainStealthy This worked surprisingly well. One thing I changed was to not set the EasyMDEContainer background because that would also include the background of the status bar at the bottom.

[jjxtra]

How to change the text selection background color?

[Ionaru]

Use the ::selection selector: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

[jjxtra]

Thanks!

[ghiscoding]

Use the ::selection selector: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

I tried to add ::selection to a few CSS classes but I really can't find anything that works, did anyone managed to update the text selection background color? Can someone provide the CSS for the change, thanks

EDIT

I took another look at this and finally found the correct Codemirror CSS classes to use, please note that ::selection will not work in this case because Coremirror override this behavior by wrapping selection text into separate spans, so you need to style these spans instead.

.EasyMDEContainer .CodeMirror {
  .CodeMirror-line {
    background: #293133;
    .CodeMirror-selectedtext {
      background: #747474;
      color: #f1f1f1;
    }
  }
}