diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 75783d391..6af7932b1 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -50,6 +50,8 @@
   --window-bg: var(--color-canvas);
 
   /* Input */
+  --input-bg: transparent;
+  --input-active-bg: transparent;
   --input-width: 330px;
   --input-color: var(--text-color);
   --input-border-size: 2px;
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index a63c6ec13..7dfd15d34 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -19,6 +19,7 @@
 @import "component/_snack-bar.scss";
 @import "component/_video.scss";
 @import "component/_pagination.scss";
+@import "component/_markdown-editor.scss";
 @import "page/_developer.scss";
 @import "page/_reward.scss";
 @import "page/_show.scss";
diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
new file mode 100644
index 000000000..9691ce7ce
--- /dev/null
+++ b/ui/scss/component/_markdown-editor.scss
@@ -0,0 +1,125 @@
+.CodeMirror {
+    background: var(--input-active-bg) !important;
+    border: 1px solid var(--input-border-color) !important;
+    color: var(--text-color) !important;
+}
+
+.CodeMirror-scroll {
+    min-height: 300px
+}
+
+.CodeMirror-fullscreen {
+    background: var(--input-bg);
+}
+
+.CodeMirror .CodeMirror-code .cm-strikethrough {
+    text-decoration: line-through;
+}
+
+.editor-toolbar {
+    border: 1px solid var(--input-border-color) !important;
+    border-bottom: 0 !important;
+}
+
+.editor-toolbar i.separator {
+    border-color:  var(--input-border-color) !important;
+}
+
+
+.editor-toolbar.fullscreen {
+    background: var(--color-bg) !important;
+}
+
+
+/*
+.editor-toolbar.fullscreen::before {
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.editor-toolbar.fullscreen::after {
+
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+}
+*/
+
+div.editor-toolbar a {
+    color:  var(--text-color) !important;
+}
+
+.editor-toolbar a.active,
+.editor-toolbar a:hover {
+    background: var(--button-bg) !important;
+    border-color: transparent !important;
+}
+
+
+
+.editor-toolbar.disabled-for-preview a:not(.no-disable) {
+    background: transparent !important;
+    border-color: transparent !important;
+}
+
+
+.editor-statusbar {
+    color: #959694;
+}
+
+.editor-preview {
+    background: var(--card-bg) !important;
+}
+
+.editor-preview-side {
+    background: var(--color-bg-alt) !important;
+    border: 1px solid var(--input-border-color) !important;
+}
+
+
+
+.editor-preview pre,
+.editor-preview-side pre {
+    background: #eee;
+}
+
+.editor-preview table td,
+.editor-preview table th,
+.editor-preview-side table td,
+.editor-preview-side table th {
+    border: 1px solid var(--input-border-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-tag {
+    color: #63a35c;
+}
+
+.CodeMirror .CodeMirror-code .cm-attribute {
+    color: #795da3;
+}
+
+.CodeMirror .CodeMirror-code .cm-string {
+    color: #183691;
+}
+
+.CodeMirror .CodeMirror-selected {
+    background: var(--text-selection-bg) !important;
+    color: var(--text-selection-color) !important;
+}
+
+.CodeMirror .CodeMirror-cursor{
+    border-color: var(--text-color) !important;
+}
+
+.CodeMirror .CodeMirror-code .cm-comment {
+    background: rgba(0, 0, 0, .05);
+}
+
+.CodeMirror .CodeMirror-code .cm-link {
+    color: #7f8c8d;
+}
+
+.CodeMirror .CodeMirror-code .cm-url {
+    color: #aab2b3;
+}
+
+.CodeMirror .CodeMirror-placeholder {
+    opacity: .5;
+}