Головна сторінка Огляд Довідка
Реєстрація Увійти
Apq
/
vditor
дзеркало https://github.com/Vanessa219/vditor.git
1
0
Відгалуження 0
Файли Проблеми 0 Wiki
Переглянути джерело

:sparkles: fix #101

Van 5 роки тому
батько
a635274486
коміт
d9534fb002
22 змінених файлів з 159 додано та 153 видалено
Розділений вигляд Показати статистику Diff
  1. 3 1
      CHANGELOG.md
  2. 1 1
      demo/index-preview.js
  3. 1 1
      demo/index.js
  4. 1 1
      demo/jest-puppeteer.js
  5. 1 1
      demo/static-preview.html
  6. 1 1
      demo/static.html
  7. 3 0
      src/assets/index.d.min.ts
  8. 18 17
      src/assets/scss/_content.scss
  9. 3 3
      src/assets/scss/_hint.scss
  10. 10 10
      src/assets/scss/_panel.scss
  11. 13 13
      src/assets/scss/_reset.scss
  12. 10 11
      src/assets/scss/_toolbar.scss
  13. 7 6
      src/assets/scss/_wysiwyg.scss
  14. 0 38
      src/assets/scss/classic.scss
  15. 0 38
      src/assets/scss/dark.scss
  16. 66 0
      src/assets/scss/index.scss
  17. 15 7
      src/index.ts
  18. 1 0
      src/ts/types/index.d.ts
  19. 2 1
      src/ts/ui/index.ts
  20. 1 0
      src/ts/util/Options.ts
  21. 1 1
      src/ts/wysiwyg/highlightToolbar.ts
  22. 1 2
      webpack.config.js

+ 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'],