CODEWITHSUNDEEP
htmlcssmarkdownsimplemde
DaltonR
DaltonR

Reputation: 31

How to change Simple MDE's preview background color?

[enter image description here][1]I am using simple mde to add markdown to my webpage. I changed the background color of the text editor, however whenever you click on the "preview" button the background color changes back to white. I would like for the preview background color to match the editor background color.

This is how I changed the editors background color

.CodeMirror {
            min-height: 200px;
            width: 100%;
            color: white;
            background-color: rgb(0, 17, 28);
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 15px;
            padding-bottom: 15px;
        }

This is how the editor color looks

This is how the preview color looks

Edit: This is my first post so I'm unable to add images, which is why they are links, sorry

Upvotes: 0

Views: 541

Answers (1)

DaltonR
DaltonR

Reputation: 31

I found the answer to this, however I'm going to leave this up in case anyone else needs the answer to it, as it wasn't very easy to find.

Solution:

.editor-preview,
        .editor-preview-side {
            background-color: rgb(0, 17, 28);
            box-sizing: border-box;
            color: #fff;
            display: none;
            font-family: inherit;
            font-size: 16px;
            line-height: 1.5;
            overflow: auto;
            padding: 0 15px 15px;
        }

.editor-preview allows you to edit the preview attributes

This was found by looking at the source code of the SimpleMDE-DarkTheme fork. You could also just use the fork if you're wanting Dark-theme but this is a solution to customize it using CSS

Upvotes: 0

Related Questions