Home

Awesome

SimpleMDE Theme Base

Build Status npm package

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

Screenshot

Screenshot of SimpleMDE Theme Base

How to use

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.

Create your theme

  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

Colors

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.

License

MIT

Thanks

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