:lipstick: dark theme

CHANGELOG.md

@@ -63,7 +63,7 @@
 * [104](https://github.com/Vanessa219/vditor/issues/104) image tag at wysiwyg mode `修复缺陷`
 * [103](https://github.com/Vanessa219/vditor/issues/103) cell alignment `修复缺陷`
 * [102](https://github.com/Vanessa219/vditor/issues/102) minus number at table(not important) `修复缺陷`
-* [101](https://github.com/Vanessa219/vditor/issues/101) 提供 setTheme(theme: "dark" | "classic") 方法 `改进功能`
+* [101](https://github.com/Vanessa219/vditor/issues/101) 提供 setTheme(theme: "dark" | "classic") 方法 `引入特性`
 * [100](https://github.com/Vanessa219/vditor/issues/100) inline-math `修复缺陷`
 * [99](https://github.com/Vanessa219/vditor/issues/99) a 中斜体/粗体时 toolbar 不显示 `修复缺陷`
 * [96](https://github.com/Vanessa219/vditor/issues/96) 所见即所得模式下的任务列表Bug `修复缺陷`

src/assets/scss/_panel.scss

@@ -61,6 +61,7 @@
     padding: 3px 5px;
     background-color:  var(--toolbar-background-color);
     font-size: 12px;
+    color: var(--textarea-text-color);
 
     &:focus {
       background-color: var(--textarea-focus-background-color);

src/assets/scss/_reset.scss

@@ -11,6 +11,12 @@
       line-height: 16px;
     }
 
+    &--dark {
+      a {
+        color: var(--toolbar-icon-color1);
+      }
+    }
+
     font-variant-ligatures: no-common-ligatures;
     font-family: $font-family-base;
     word-wrap: break-word;
@@ -162,8 +168,8 @@
       border-spacing: 0;
 
       tr {
-        background-color: #fff;
-        border-top: 1px solid #c6cbd1
+        background-color: var(--textarea-background-color);
+        border-top: 1px solid #c6cbd1;
       }
 
       td,
@@ -178,7 +184,7 @@
       }
 
       tbody tr:nth-child(2n) {
-        background-color: #f6f8fa;
+        background-color: var(--toolbar-background-color);
       }
     }
 
@@ -191,7 +197,7 @@
       word-break: break-word;
       background-size: 20px 20px;
       white-space: pre-wrap;
-      background-color: rgba(27, 31, 35, .05);
+      background-color: var(--code-background-color);
     }
 
     pre > code {

src/assets/scss/_wysiwyg.scss

@@ -46,7 +46,6 @@
       display: none;
 
       & > code {
-        background-color: #fff !important;
         border: 1px solid var(--border-color);
         overflow: auto !important;
         display: block;

src/assets/scss/index.scss

@@ -36,6 +36,8 @@ $transition: all .15s ease-in-out !default;
 
   --preview-background-color: #fff;
 
+  --code-background-color: rgba(27, 31, 35, .05);
+
   &--dark {
     --border-color: #141414;
 
@@ -55,6 +57,8 @@ $transition: all .15s ease-in-out !default;
     --resize-hover-background-color: #1d2125;
 
     --preview-background-color: #f3f3f3;
+
+    --code-background-color: rgba(177, 181, 215, 0.23);
   }
 }
 

src/index.ts

@@ -131,8 +131,14 @@ class Vditor {
     public setTheme(theme: "dark" | "classic") {
         if (theme === "dark") {
             document.getElementById(this.vditor.id).classList.add("vditor--dark");
+            if (this.vditor.wysiwyg) {
+                this.vditor.wysiwyg.element.classList.add("vditor-reset--dark");
+            }
         } else {
             document.getElementById(this.vditor.id).classList.remove("vditor--dark");
+            if (this.vditor.wysiwyg) {
+                this.vditor.wysiwyg.element.classList.remove("vditor-reset--dark");
+            }
         }
     }
 

src/ts/markdown/abcRender.ts

@@ -12,6 +12,7 @@ export const abcRender = (element: (HTMLElement | Document) = document,
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript");
         abcElements.forEach((e: HTMLDivElement) => {
             const divElement = document.createElement("div");
+            divElement.style.backgroundColor = "var(--code-background-color)";
             e.parentNode.parentNode.replaceChild(divElement, e.parentNode);
             ABCJS.renderAbc(divElement, e.textContent.trim());
             divElement.style.overflowX = "auto";

src/ts/wysiwyg/index.ts

@@ -29,6 +29,9 @@ class WYSIWYG {
     constructor(vditor: IVditor) {
         this.element = document.createElement("pre");
         this.element.className = "vditor-reset vditor-wysiwyg";
+        if (vditor.options.theme === "dark") {
+            this.element.classList.add("vditor-reset--dark");
+        }
         // TODO: placeholder
         this.element.setAttribute("contenteditable", "true");
         this.element.setAttribute("spellcheck", "false");