From 35b2176bacb29e1af2d8e01f50f5ff0aa2d534f1 Mon Sep 17 00:00:00 2001
From: Martin Blom <martin@blom.org>
Date: Sun, 29 Jul 2018 10:08:54 +0200
Subject: [PATCH] Made EasyMDE themable (again?).

* The default theme is 'easymde', but can be overridden by options.theme.
* Changed styles to use this theme as selector instead of .CodeMirror.
* Dropped unnecessary .cm-strikethrough styling.
* Added .cm-quote styling.
* Changed .CodeMirror-selected rule to match codemirror.css.
---
 src/css/easymde.css | 41 +++++++++++++++++++++--------------------
 src/js/easymde.js   |  2 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/css/easymde.css b/src/css/easymde.css
index 3aa3c9e..3822aa4 100644
--- a/src/css/easymde.css
+++ b/src/css/easymde.css
@@ -31,6 +31,14 @@
     width: 50% !important;
 }
 
+.CodeMirror-placeholder {
+    opacity: .5;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+    background: #d9d9d9;
+}
+
 .editor-toolbar {
     position: relative;
     -webkit-user-select: none;
@@ -262,59 +270,52 @@
     padding: 5px;
 }
 
-.CodeMirror .CodeMirror-code .cm-tag {
+.cm-s-easymde .cm-tag {
     color: #63a35c;
 }
 
-.CodeMirror .CodeMirror-code .cm-attribute {
+.cm-s-easymde .cm-attribute {
     color: #795da3;
 }
 
-.CodeMirror .CodeMirror-code .cm-string {
+.cm-s-easymde .cm-string {
     color: #183691;
 }
 
-.CodeMirror .CodeMirror-selected {
-    background: #d9d9d9;
-}
-
-.CodeMirror .CodeMirror-code .cm-header-1 {
+.cm-s-easymde .cm-header-1 {
     font-size: 200%;
     line-height: 200%;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-2 {
+.cm-s-easymde .cm-header-2 {
     font-size: 160%;
     line-height: 160%;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-3 {
+.cm-s-easymde .cm-header-3 {
     font-size: 125%;
     line-height: 125%;
 }
 
-.CodeMirror .CodeMirror-code .cm-header-4 {
+.cm-s-easymde .cm-header-4 {
     font-size: 110%;
     line-height: 110%;
 }
 
-.CodeMirror .CodeMirror-code .cm-comment {
+.cm-s-easymde .cm-comment {
     background: rgba(0, 0, 0, .05);
     border-radius: 2px;
 }
 
-.CodeMirror .CodeMirror-code .cm-link {
+.cm-s-easymde .cm-link {
     color: #7f8c8d;
 }
 
-.CodeMirror .CodeMirror-code .cm-url {
+.cm-s-easymde .cm-url {
     color: #aab2b3;
 }
 
-.CodeMirror .CodeMirror-code .cm-strikethrough {
-    text-decoration: line-through;
-}
-
-.CodeMirror .CodeMirror-placeholder {
-    opacity: .5;
+.cm-s-easymde .cm-quote {
+    color     : #7f8c8d;
+    font-style: italic;
 }
diff --git a/src/js/easymde.js b/src/js/easymde.js
index 4b475d0..a8cb1af 100644
--- a/src/js/easymde.js
+++ b/src/js/easymde.js
@@ -1581,7 +1581,7 @@ EasyMDE.prototype.render = function (el) {
     this.codemirror = CodeMirror.fromTextArea(el, {
         mode: mode,
         backdrop: backdrop,
-        theme: 'paper',
+        theme: (options.theme != undefined) ? options.theme : 'easymde',
         tabSize: (options.tabSize != undefined) ? options.tabSize : 2,
         indentUnit: (options.tabSize != undefined) ? options.tabSize : 2,
         indentWithTabs: (options.indentWithTabs === false) ? false : true,