The base theme for SimpleMDE, you can easily build your custom theme based on this.
The base theme for SimpleMDE, you can easily create your custom theme based on this.
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.
npm install
and npm start
docs/index.html
to see the demosrc/_custom.scss
to customize your themebase
to your theme nameCheckout 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.