Van 5 роки тому
батько
коміт
d9534fb002

+ 3 - 1
CHANGELOG.md

@@ -40,8 +40,9 @@
 * [55](https://github.com/Vanessa219/vditor/issues/55) 链接引用不转换为内联链接 `改进功能`
 * [81](https://github.com/Vanessa219/vditor/issues/81) 链接和图片嵌套问题 `修复缺陷`
 
-### v2.1.9 / 2020-02-03
+### v2.1.9 / 2020-02-04
 
+* [101](https://github.com/Vanessa219/vditor/issues/101) 提供 setTheme(theme: "dark" | "classic") 方法 `改进功能`
 * [99](https://github.com/Vanessa219/vditor/issues/99) a 中斜体/粗体时 toolbar 不显示 `修复缺陷`
 * [96](https://github.com/Vanessa219/vditor/issues/96) 所见即所得模式下的任务列表Bug `修复缺陷`
 * [95](https://github.com/Vanessa219/vditor/issues/95) setVaule 和 初始化时,不触发 input 事件 `改进功能`
@@ -73,6 +74,7 @@
   * 添加 options.upload.file 方法
   * options.preview 修改,支持 MathJax 配置
   * 移除 mathRender 方法
+  * 添加 setTheme 方法,classic.scss -> index.scss
 
 ### v2.0.15 / 2020-01-11
 

+ 1 - 1
demo/index-preview.js

@@ -1,5 +1,5 @@
 import VditorPreview from '../src/method'
-import '../src/assets/scss/classic.scss'
+import '../src/assets/scss/index.scss'
 
 VditorPreview.preview(document.getElementById('preview'),
   document.getElementById('markdownText').textContent, {

+ 1 - 1
demo/index.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/index'
-import '../src/assets/scss/classic.scss'
+import '../src/assets/scss/index.scss'
 
 window.vditor = new Vditor('vditor', {
   debugger: true,

+ 1 - 1
demo/jest-puppeteer.js

@@ -1,5 +1,5 @@
 import Vditor from '../src/index'
-import '../src/assets/scss/classic.scss'
+import '../src/assets/scss/index.scss'
 
 window.vditorTest = new Vditor('vditorTest', {
   tab: '\t',

+ 1 - 1
demo/static-preview.html

@@ -34,7 +34,7 @@
     <meta name="twitter:url" content="https://hacpai.com/tag/vditor"/>
     <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.css"/>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/method.min.js"></script>
     <style>
         .preview {

+ 1 - 1
demo/static.html

@@ -34,7 +34,7 @@
     <meta name="twitter:url" content="https://hacpai.com/tag/vditor"/>
     <meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
     <meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.classic.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.css"/>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
 </head>
 <body>

+ 3 - 0
src/assets/index.d.min.ts

@@ -132,6 +132,7 @@ interface IOptions {
     classes?: IClasses;
     cdn?: string;
     tab?: string;
+    theme?: "classic" | "dark";
 
     input?(value: string, previewElement?: HTMLElement): void;
 
@@ -172,6 +173,8 @@ declare class Vditor {
 
     constructor(id: string, options?: IOptions)
 
+    public setTheme(theme: "dark" | "classic"): void;
+
     public getValue(): string;
 
     public insertValue(value: string): void;

+ 18 - 17
src/assets/scss/_content.scss

@@ -12,7 +12,7 @@
 .vditor {
   display: flex;
   flex-direction: column;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--border-color);
   border-radius: 3px;
   box-sizing: border-box;
   font-family: $font-family-base;
@@ -32,6 +32,7 @@
     min-height: 60px;
     flex: 1;
     position: relative;
+    background-color: var(--textarea-background-color);
   }
 
   &-textarea {
@@ -45,11 +46,11 @@
     resize: none;
     padding: 10px 9px 10px 10px;
     box-sizing: border-box;
-    background-color: $textareaBg;
+    background-color: var(--textarea-background-color);
     outline: 0 none;
     font-size: 16px;
     line-height: 22px;
-    color: $textareaColor;
+    color: var(--textarea-text-color);
     border-radius: 0 0 3px 3px;
     font-variant-ligatures: no-common-ligatures;
     white-space: pre-wrap;
@@ -62,22 +63,22 @@
     }
 
     &:focus {
-      background-color: $textareaFocusBg;
+      background-color: var(--textarea-focus-background-color);
     }
 
     &:empty::before {
       content: attr(placeholder);
-      color: rgba($textareaColor, .68);
+      color: var(--toolbar-icon-color1);
     }
   }
 
   &-preview {
     flex: 1;
-    background-color: $previewBg;
+    background-color: var(--preview-background-color);
     overflow: auto;
     margin-left: -1px;
     padding: 10px;
-    box-shadow: inset 1px 0 $borderColor;
+    box-shadow: inset 1px 0  var(--border-color);
     box-sizing: border-box;
     border-radius: 0 0 3px 0;
 
@@ -92,10 +93,10 @@
 
   &-devtools {
     display: none;
-    background-color: $previewBg;
+    background-color: var(--preview-background-color);
     overflow: auto;
     flex: 1;
-    box-shadow: inset 1px 0 $borderColor;
+    box-shadow: inset 1px 0  var(--border-color);
     box-sizing: border-box;
     border-radius: 0 0 3px 0;
     padding: 10px;
@@ -106,7 +107,7 @@
     position: absolute;
     bottom: 10px;
     right: 20px;
-    color: $textareaColor;
+    color: var(--textarea-text-color);
     background-color: rgba($fullscreenBg, 0.6);
     border-radius: 3px;
     font-size: 12px;
@@ -137,14 +138,14 @@
 
     & > div {
       height: 3px;
-      background-color: $resizeBg;
+      background-color: var(--resize-background-color);
       transition: $transition;
     }
 
     &:hover,
     &--selected {
       & > div {
-        background-color: $resizeHoverBg;
+        background-color: var(--resize-hover-background-color);
       }
 
       svg {
@@ -160,7 +161,7 @@
       height: 3px;
       display: block;
       margin: 0 auto;
-      color: $toolbarIcon;
+      color:  var(--toolbar-icon-color);
     }
   }
 
@@ -170,7 +171,7 @@
     left: 0;
     top: -2px;
     transition: $transition;
-    background-color: rgba($hoverBg, 0.8);
+    background-color: var(--hover-background-color1);
   }
 
   &-tip {
@@ -193,7 +194,7 @@
       line-height: 16px;
       padding: 3px 10px;
       border-radius: 3px;
-      background: rgba($hoverBg, 0.8);
+      background: var(--hover-background-color1);
       position: relative;
       margin-left: -50%;
 
@@ -205,14 +206,14 @@
 
     &__close {
       position: absolute;
-      color: $toolbarIcon;
+      color:  var(--toolbar-icon-color);
       top: -7px;
       right: -15px;
       font-weight: bold;
       cursor: pointer;
 
       &:hover {
-        color: $toolbarIconHover;
+        color:  var(--toolbar-icon-hover-color);
       }
     }
   }

+ 3 - 3
src/assets/scss/_hint.scss

@@ -7,7 +7,7 @@
   z-index: 4;
   line-height: 20px;
   list-style: none;
-  color: $textareaColor;
+  color: var(--textarea-text-color);
   font-size: 12px;
   margin: 0;
   max-width: 250px;
@@ -18,7 +18,7 @@
     display: block;
     padding: 3px 10px;
     border: 0;
-    border-bottom: 1px solid $borderColor;
+    border-bottom: 1px solid  var(--border-color);
     line-height: 20px;
     width: 100%;
     box-sizing: border-box;
@@ -32,7 +32,7 @@
 
   &--current,
   button:hover {
-    background-color: $hoverBg !important;
+    background-color: var(--hover-background-color) !important;
     color: $hoverColor;
   }
 

+ 10 - 10
src/assets/scss/_panel.scss

@@ -34,10 +34,10 @@
     animation-timing-function: cubic-bezier(.2, 0, .13, 1.5);
 
     &--none {
-      color: $toolbarIconHover;
+      color:  var(--toolbar-icon-hover-color);
       padding: 0;
       animation: none;
-      background-color: $toolbarBg;
+      background-color:  var(--toolbar-background-color);
       min-width: auto;
       max-width: none;
     }
@@ -50,7 +50,7 @@
       line-height: normal;
 
       &:hover {
-        background-color: $hoverBg;
+        background-color: var(--hover-background-color);
         color: $hoverColor;
       }
     }
@@ -59,11 +59,11 @@
   &-input {
     border: 0;
     padding: 3px 5px;
-    background-color: $toolbarBg;
+    background-color:  var(--toolbar-background-color);
     font-size: 12px;
 
     &:focus {
-      background-color: $textareaFocusBg;
+      background-color: var(--textarea-focus-background-color);
       outline: none;
     }
   }
@@ -71,21 +71,21 @@
   &-btn {
     border-radius: 3px;
     cursor: pointer;
-    background-color: $toolbarBg;
+    background-color:  var(--toolbar-background-color);
     font-size: 12px;
     padding: 2px 7px 1px;
-    border: 1px solid $borderColor;
+    border: 1px solid  var(--border-color);
     line-height: 16px;
     float: right;
 
     &:focus {
       outline: none;
-      background-color: $textareaFocusBg;
+      background-color: var(--textarea-focus-background-color);
     }
   }
 
   &-icon {
-    color: $toolbarIcon;
+    color:  var(--toolbar-icon-color);
     cursor: pointer;
     float: left;
     padding: 2px 5px;
@@ -97,7 +97,7 @@
 
     &:hover,
     &--current {
-      color: $toolbarIconHover;
+      color:  var(--toolbar-icon-hover-color);
       background-color: transparent;
     }
 

+ 13 - 13
src/assets/scss/_reset.scss

@@ -142,7 +142,7 @@
     }
 
     iframe {
-      border: 1px solid $borderColor;
+      border: 1px solid var(--border-color);
       max-width: 100%;
       box-sizing: border-box;
 
@@ -221,7 +221,7 @@
       color: #555;
       vertical-align: middle;
       background-color: #fcfcfc;
-      border: solid 1px $borderColor;
+      border: solid 1px var(--border-color);
       border-bottom-color: #bbb;
       border-radius: 3px;
       box-shadow: inset 0 -1px 0 #bbb;
@@ -284,13 +284,13 @@
       height: 14px;
       width: 14px;
       display: block;
-      background-color: $toolbarBg;
+      background-color: var(--toolbar-background-color);
       border-radius: 3px;
       padding: 3px;
     }
 
     svg {
-      color: $toolbarIcon;
+      color: var(--toolbar-icon-color);
       height: 14px;
       width: 14px !important;
       display: block;
@@ -330,16 +330,16 @@
   &-speech {
     position: absolute;
     display: none;
-    background-color: $toolbarBg;
-    border: 1px solid $borderColor;
+    background-color: var(--toolbar-background-color);
+    border: 1px solid var(--border-color);
     border-radius: 3px;
     padding: 3px;
     cursor: pointer;
-    color: $toolbarIcon;
+    color: var(--toolbar-icon-color);
 
     &:hover,
     &--current {
-      color: $toolbarIconHover;
+      color: var(--toolbar-icon-hover-color);
     }
 
     svg {
@@ -381,7 +381,7 @@
 
     a {
       border-radius: 3px;
-      background-color: $toolbarBg;
+      background-color: var(--toolbar-background-color);
       overflow: hidden;
       max-height: 250px;
       display: flex;
@@ -395,7 +395,7 @@
       }
 
       &:visited .vditor-linkcard__abstract {
-        color: rgba($toolbarIcon, .6);
+        color: var(--toolbar-icon-color1);
       }
     }
 
@@ -409,7 +409,7 @@
     &__title {
       font-size: 14px;
       font-weight: 400;
-      color: $textareaColor;
+      color: var(--textarea-text-color);
       display: flex;
       align-items: center;
 
@@ -432,13 +432,13 @@
       -webkit-box-orient: vertical;
       display: -webkit-box;
       font-size: 13px;
-      color: $toolbarIcon;
+      color: var(--toolbar-icon-color);
       margin: 5px 0;
     }
 
     &__site {
       font-size: 12px;
-      color: $toolbarIconHover;
+      color: var(--toolbar-icon-hover-color);
     }
 
     &__image {

+ 10 - 11
src/assets/scss/_toolbar.scss

@@ -6,10 +6,9 @@
  */
 .vditor {
   &-toolbar {
-    background-color: $toolbarBg;
-    border-bottom: 1px solid $borderColor;
+    background-color:  var(--toolbar-background-color);
+    border-bottom: 1px solid  var(--border-color);
     padding: 0 5px;
-    border-radius: 3px 3px 0 0;
 
     & > div {
       float: left;
@@ -31,10 +30,10 @@
 
 
     .vditor-tooltipped {
-      color: $toolbarIcon;
+      color: var(--toolbar-icon-color);
 
       &:hover {
-        color: $toolbarIconHover;
+        color: var(--toolbar-icon-hover-color);
       }
     }
 
@@ -61,7 +60,7 @@
 
   &-menu {
     &--current svg {
-      color: $toolbarIconHover;
+      color:  var(--toolbar-icon-hover-color);
     }
 
     &__divider {
@@ -76,7 +75,7 @@
     }
 
     &--disabled svg {
-      color: rgba($toolbarIcon, .6);
+      color: var(--toolbar-icon-color1);
       cursor: not-allowed;
     }
   }
@@ -93,7 +92,7 @@
       flex: 1;
       width: 200px;
       margin-right: 10px;
-      color: $toolbarIcon;
+      color:  var(--toolbar-icon-color);
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -102,15 +101,15 @@
     &__tail {
       margin-top: 5px;
       font-size: 12px;
-      color: $toolbarIcon;
+      color:  var(--toolbar-icon-color);
       display: flex;
 
       a {
         text-decoration: none;
-        color: $toolbarIcon;
+        color:  var(--toolbar-icon-color);
 
         &:hover {
-          color: $hoverBg;
+          color: var(--hover-background-color);
         }
       }
     }

+ 7 - 6
src/assets/scss/_wysiwyg.scss

@@ -1,10 +1,11 @@
 .vditor-wysiwyg {
-  background-color: $textareaBg;
+  background-color: var(--textarea-background-color);
   box-sizing: border-box;
   flex: 1;
   margin: 0;
   white-space: pre-wrap;
   position: relative;
+  color: var(--textarea-text-color);
 
   &[contenteditable="false"] {
     opacity: 0.3;
@@ -13,7 +14,7 @@
 
   &:focus {
     outline: none;
-    background-color: $textareaFocusBg;
+    background-color: var(--textarea-focus-background-color);
   }
 
   blockquote:empty::before,
@@ -41,14 +42,14 @@
 
       & > code {
         background-color: #fff !important;
-        border: 1px solid $borderColor;
+        border: 1px solid var(--border-color);
         overflow: auto !important;
         display: block;
       }
     }
 
     &[data-type=html-inline] .vditor-wysiwyg__preview svg {
-      fill: rgba($toolbarIcon, .36);
+      fill: var(--toolbar-icon-color1);
       height: 12px;
       cursor: pointer;
       width: 12px;
@@ -79,7 +80,7 @@
     font-size: 0.85rem;
     font-weight: normal;
     text-transform: uppercase;
-    color: rgba($toolbarIcon, .36);
+    color: var(--toolbar-icon-color1);
   }
 
   h2:before {
@@ -114,7 +115,7 @@
 
   span[data-type="backslash"] > span {
     display: none;
-    color: rgba($toolbarIcon, .36);
+    color: var(--toolbar-icon-color1);
   }
 
 }

+ 0 - 38
src/assets/scss/classic.scss

@@ -1,38 +0,0 @@
-$borderColor: #d1d5da !default;
-$errorColor: #d23f31 !default;
-
-$toolbarBg: #f6f8fa !default;
-$toolbarIcon: #586069 !default;
-$toolbarIconHover: #4285f4 !default;
-
-$textareaBg: #fafbfc !default;
-$textareaColor: #24292e !default;
-$textareaFocusBg: #fff !default;
-
-$tooltipColor: #fff !default;
-$tooltipBg: rgba(0, 0, 0, 0.8) !default;
-
-$layerBg: #fff !default;
-$layerShadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
-
-$hoverBg: #4285f4 !default;
-$hoverColor: #fff !default;
-
-$resizeBg: #f6f8fa !default;
-$resizeHoverBg: #4285f4 !default;
-
-$fullscreenBg: #fff !default;
-$previewBg: #fff !default;
-
-$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-
-$transition: all .15s ease-in-out !default;
-
-@import "tooltipped";
-@import "panel";
-@import "toolbar";
-@import "content";
-@import "hint";
-@import "reset";
-@import "wysiwyg";

+ 0 - 38
src/assets/scss/dark.scss

@@ -1,38 +0,0 @@
-$borderColor: #fff !default;
-
-$toolbarBg: #2c2c2c !default;
-$toolbarIcon: #b9b9b9 !default;
-$toolbarIconHover: #fff !default;
-$errorColor: #d23f31 !default;
-
-$textareaBg: #fff !default;
-$textareaColor: rgba(0, 0, 0, .8) !default;
-$textareaFocusBg: #fff !default;
-
-$tooltipColor: #fff !default;
-$tooltipBg: rgba(0, 0, 0, 0.8) !default;
-
-$layerBg: #fff !default;
-$layerShadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
-
-$resizeBg: #f3f3f3 !default;
-$resizeHoverBg: #2c2c2c !default;
-
-$hoverBg: #2c2c2c !default;
-$hoverColor: #fff !default;
-
-$fullscreenBg: #fff !default;
-$previewBg: #f3f3f3 !default;
-
-$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
-
-$transition: all .15s ease-in-out !default;
-
-@import "tooltipped";
-@import "panel";
-@import "toolbar";
-@import "content";
-@import "wysiwyg";
-@import "hint";
-@import "reset";

+ 66 - 0
src/assets/scss/index.scss

@@ -0,0 +1,66 @@
+$errorColor: #d23f31 !default;
+
+$tooltipColor: #fff !default;
+$tooltipBg: rgba(0, 0, 0, 0.8) !default;
+
+$layerBg: #fff !default;
+$layerShadow: 0 1px 2px rgba(0, 0, 0, .2) !default;
+
+$hoverColor: #fff !default;
+
+$fullscreenBg: #fff !default;
+
+$font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
+$font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !default;
+
+$transition: all .15s ease-in-out !default;
+
+.vditor {
+  --border-color: #d1d5da;
+
+  --toolbar-background-color: #f6f8fa;
+  --toolbar-icon-color: #586069;
+  --toolbar-icon-hover-color: #4285f4;
+  --toolbar-icon-color1: rgba(88, 96, 105, 0.36);
+
+  --textarea-background-color: #fafbfc;
+  --textarea-focus-background-color: #fff;
+  --textarea-text-color: #24292e;
+
+  --hover-background-color: #4285f4;
+  --hover-background-color1: rgba(66, 133, 244, .8);
+
+  --resize-background-color: #f6f8fa;
+  --resize-hover-background-color: #4285f4;
+
+  --preview-background-color: #fff;
+
+  &--dark {
+    --border-color: #141414;
+
+    --toolbar-background-color: #1d2125;
+    --toolbar-icon-color: #b9b9b9;
+    --toolbar-icon-hover-color: #fff;
+    --toolbar-icon-color1: rgba(185, 185, 185, .36);
+
+    --textarea-background-color: #24292e;
+    --textarea-focus-background-color: #24292e;
+    --textarea-text-color: #d1d5da;
+
+    --hover-background-color: #1d2125;
+    --hover-background-color1: rgba(44, 44, 44, 0.8);
+
+    --resize-background-color: #1d2125;
+    --resize-hover-background-color: #1d2125;
+
+    --preview-background-color: #f3f3f3;
+  }
+}
+
+@import "tooltipped";
+@import "panel";
+@import "toolbar";
+@import "content";
+@import "hint";
+@import "reset";
+@import "wysiwyg";

+ 15 - 7
src/index.ts

@@ -127,6 +127,14 @@ class Vditor {
         });
     }
 
+    public setTheme(theme: "dark" | "classic") {
+        if (theme === "dark") {
+            document.getElementById(this.vditor.id).classList.add("vditor--dark");
+        } else {
+            document.getElementById(this.vditor.id).classList.remove("vditor--dark");
+        }
+    }
+
     public getValue() {
         return getMarkdown(this.vditor);
     }
@@ -266,13 +274,13 @@ class Vditor {
     public setValue(markdown: string) {
         if (this.vditor.currentMode === "markdown") {
             formatRender(this.vditor, markdown, {
-                    end: markdown.length,
-                    start: markdown.length,
-                }, {
-                    enableAddUndoStack: true,
-                    enableHint: false,
-                    enableInput: false,
-                });
+                end: markdown.length,
+                start: markdown.length,
+            }, {
+                enableAddUndoStack: true,
+                enableHint: false,
+                enableInput: false,
+            });
         } else {
             renderDomByMd(this.vditor, markdown, false);
         }

+ 1 - 0
src/ts/types/index.d.ts

@@ -206,6 +206,7 @@ interface IOptions {
     mode?: "wysiwyg-show" | "markdown-show" | "wysiwyg-only" | "markdown-only";
     preview?: IPreview;
     hint?: IHint;
+    theme?: "classic" | "dark";
     upload?: IUpload;
     classes?: IClasses;
     cdn?: string;

+ 2 - 1
src/ts/ui/index.ts

@@ -8,7 +8,8 @@ export class Ui {
     constructor(vditor: IVditor) {
         const vditorElement = document.getElementById(vditor.id);
         vditorElement.innerHTML = "";
-        vditorElement.className = "vditor" + (vditorElement.className ? " " + vditorElement.className : "");
+        vditorElement.className = "vditor" + (vditor.options.theme === "dark" ? "vditor--dark" : "")
+            + (vditorElement.className ? " " + vditorElement.className : "");
         if (typeof vditor.options.height === "number") {
             vditorElement.style.height = vditor.options.height + "px";
         }

+ 1 - 0
src/ts/util/Options.ts

@@ -48,6 +48,7 @@ export class Options {
             enable: false,
             position: "bottom",
         },
+        theme: "classic",
         toolbar: [{
             hotkey: "⌘-e",
             name: "emoji",

+ 1 - 1
src/ts/wysiwyg/highlightToolbar.ts

@@ -72,7 +72,7 @@ export const highlightToolbar = (vditor: IVditor) => {
             setCurrentToolbar(vditor.toolbar.elements, ["strike"]);
         }
 
-        const aElement = hasClosestByMatchTag(typeElement, "A")
+        const aElement = hasClosestByMatchTag(typeElement, "A");
         if (aElement) {
             setCurrentToolbar(vditor.toolbar.elements, ["link"]);
         }

+ 1 - 2
webpack.config.js

@@ -53,8 +53,7 @@ module.exports = [
   {
     mode: 'production',
     entry: {
-      'index.classic': './src/assets/scss/classic.scss',
-      'index.dark': './src/assets/scss/dark.scss',
+      'index': './src/assets/scss/index.scss',
     },
     resolve: {
       extensions: ['.scss'],