Dark Mode Documentation

[Vaelatern]

Is your feature request related to a problem? Please describe.

I have recently embedded this excellent editor (thank you!) into a website, but now have a directive to support dark mode. So I've begun working in dark mode. Most of the editor looks OK when I override some specific content:

.CodeMirror{color:#ccc;border-color:#333;background-color:inherit}

And to get the cursor working I used

.cm-s-easymde .CodeMirror-cursor{border-color:#ccc}

The only thing I don't have working is anything with fullscreen or preview modes; all those seem to set the background color.

Describe the solution you'd like Just some documentation detailing my adventure so nobody else has to wander. Thank you!

[qaler]

Hi Vaelatern, do you know how to change the toolbar and the preview panel theme to dark mode?

[Vaelatern]

I never worked out preview mode

[Merlin04]

Here's what I'm using for dark mode:

editorDark: {
    "& .CodeMirror": {
        color: theme.palette.common.white,
        borderColor: theme.palette.background.paper,
        backgroundColor: "inherit"
    },
    "& .cm-s-easymde .CodeMirror-cursor": {
        borderColor: theme.palette.background.paper
    },
    "& .editor-toolbar > *": {
        color: theme.palette.common.white
    },
    "& .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment": {
        backgroundColor: theme.palette.background.paper
    },
    "& .editor-preview": {
        backgroundColor: theme.palette.background.default
    }
}

It's written for Material-UI's makeStyles system but it shouldn't be too difficult to adapt to CSS (theme.palette.background.paper is light gray and theme.palette.background.default is dark gray).

This works for the editor, toolbar, and preview mode:

[hjzheng]

use https://github.com/hjzheng/markdown-electron/blob/main/src/renderer/src/assets/easymde.dark.min.css to override easymde.min.css

for example

if (getPreferredScheme() === 'dark') {
    import("easymde/dist/easymde.min.css")
    // override some style to support dark mode
    import("@renderer/assets/easymde.dark.min.css")
} else {
    import("easymde/dist/easymde.min.css")
}

[theoratkin]

I have built upon @hjzheng's post to make it play nice with Bootstrap.

Code

```css /* Custom CSS to make EasyMDE play nice with Bootstrap colors */ .EasyMDEContainer .CodeMirror { color: var(--bs-body-color); border-color: var(--bs-border-color); background-color: var(--bs-body-bg); } .EasyMDEContainer .cm-s-easymde .CodeMirror-cursor { border-color: var(--bs-body-color); } .CodeMirror-cursor { border-left:1px solid var(--bs-body-color); border-right:none;width:0; } .EasyMDEContainer .editor-toolbar > * { border-color: var(--bs-body-bg); } .editor-toolbar { border-top: 1px solid var(--bs-border-color); border-left: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); } .editor-toolbar i.separator { border-left: 1px solid var(--bs-border-color); border-right: 1px solid var(--bs-border-color); } .EasyMDEContainer .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment { background-color: var(--bs-body-bg); } .EasyMDEContainer .CodeMirror-fullscreen { background: var(--bs-body-bg); } .editor-toolbar.fullscreen { background: var(--bs-body-bg); } .editor-preview { background: var(--bs-body-bg); } .editor-preview-side { border-color: var(--bs-border-color); } .CodeMirror-selected { background: var(--bs-secondary-bg); } .CodeMirror-focused .CodeMirror-selected { background: var(--bs-secondary-bg); } .CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection { background:var(--bs-secondary-bg) } .CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection { background:var(--bs-secondary-bg) } .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: var(--bs-secondary-bg) } ```