easy-markdown-editor
easy-markdown-editor copied to clipboard
Dark Background?
How do I set my background to another color using CSS/JS? The other dark mode thread did not help me.
I would like it too!
Anyone find a solution for this?
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
}
@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.
How to change the text selection background color?
Use the ::selection
selector: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
Thanks!