The base theme for SimpleMDE, you can easily create your custom theme based on this.

• Demo
• List of themes

First, follow SimpleMDE official guide to initial your editor.

Second, replace

https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css

with

https://cdn.rawgit.com/xcatliu/simplemde-theme-base/master/dist/simplemde-theme-base.min.css

That all, there is no step three.

1. Fork SimpleMDE Theme Base
2. Clone the forked repo to your workspace
3. Run npm install and npm start
4. Open docs/index.html to see the demo
5. Update src/_custom.scss to customize your theme
6. Replace base to your theme name
7. Add your theme to the list of themes

Checkout an example of customized theme: SimpleMDE Theme Dark

The most common way of customizing a theme is to change the colors.

SimpleMDE Theme Base make this super easy by abstract the colors of SimpleMDE:

//
//
// An example for dark theme
//
// Also you can copy variables from _variables.scss to _custom.scss
// to customize typography, spacing and other variables.
//
//


// Background color
$color-background: #444;
// For code, th
$color-background-over: rgba(255, 255, 255, 0.05);
// For selected area
$color-background-selected: rgba(255, 255, 255, 0.1);

// Border color
$color-border: #555;

// Text color
$color-text: #aaa;
$color-text-muted: #777;
// The link color
$color-text-link: hsl(50, 100%, 50%);

// For preview section
$smde-color-background-preview: #444;
// Image alt, HTML tag and attribute
$smde-color-text-tag: hsl(80, 50%, 50%);

Also you can copy variables from _variables.scss to _custom.scss to customize typography, spacing and other variables.

MIT

Thanks to SimpleMDE for the great editor and Mobi.css for the inspiration of styling.