easy-markdown-editor

easy-markdown-editor copied to clipboard

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!

Nov 19 '19 06:11 Vaelatern

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

Oct 22 '20 03:10 qaler

I never worked out preview mode

Oct 22 '20 03:10 Vaelatern

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:

Dec 20 '20 21:12 Merlin04

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")
}

Apr 12 '23 14:04 hjzheng

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

/* 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)
}

Sep 27 '23 22:09 theoratkin