The base theme for SimpleMDE, you can easily build your custom theme based on this.
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist 0.1.2 Jan 5, 2017
docs
src
.gitignore Add stylelint Jan 5, 2017
.stylelintrc.json Add min.css.map Jan 5, 2017
.travis.yml Add .travis.yml Jan 5, 2017
README.md
gulpfile.js
package.json 0.1.2 Jan 5, 2017

README.md

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. Folk SimpleMDE Theme Base
  2. Clone the folked 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.