style: Modify view style.

Author: jaywcjlove

package.json

@@ -15,7 +15,7 @@
     "css:build:dist": "compile-less -d src --combine markdown-editor.css --rm-global",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "pretty-quick": "pretty-quick --staged",
-    "watch": "tsbb watch",
+    "watch": "tsbb watch & npm run css:watch",
     "build": "tsbb build && npm run css:build && npm run css:build:dist"
   },
   "repository": {

src/components/CodeMirror/codemirror.less

@@ -14,12 +14,12 @@
 .CodeMirror-scrollbar-filler,
 .CodeMirror-gutter-filler {
   background-color: white;
-  background-color: var(--color-thme-bg);
+  background-color: var(--color-canvas-subtle);
 }
 
 .CodeMirror-gutters {
   border-right: 1px solid var(--color-border-muted);
-  background-color: var(--color-thme-bg);
+  background-color: var(--color-canvas-subtle);
   white-space: nowrap;
 }
 .CodeMirror-linenumber {
@@ -38,7 +38,7 @@
 }
 
 .CodeMirror-cursor {
-  border-left: 1px solid var(--color-thme-text);
+  border-left: 1px solid var(--color-fg-default);
   border-right: none;
   width: 0;
 }

src/components/ToolBar/index.less

@@ -3,7 +3,7 @@
 .@{editor-prefix} {
   &-toolbar {
     border-bottom: 1px solid var(--color-border-muted);
-    background-color: var(--color-thme-bg);
+    background-color: var(--color-canvas-subtle);
     padding: 4px 2px 4px 5px;
     border-radius: 3px 3px 0 0;
     button {
@@ -17,6 +17,7 @@
       padding: 3px 2px;
       border-radius: 2px;
       transition: all 0.3s;
+      color: var(--color-fg-default);
       &:hover {
         color: var(--color-accent-fg);
         background-color: var(--color-neutral-muted);

src/index.less

@@ -8,12 +8,12 @@
 }
 
 .@{editor-prefix} {
-  color: var(--color-thme-text);
+  color: var(--color-fg-default);
   box-shadow: var(--color-border-shadow);
   text-align: left;
   border-radius: 3px;
   position: relative;
-  background-color: var(--color-thme-bg);
+  background-color: var(--color-canvas-subtle);
   &-content {
     position: relative;
   }
@@ -32,7 +32,7 @@
     border-radius: 0;
   }
   &-preview {
-    background-color: var(--color-thme-bg);
+    background-color: var(--color-canvas-subtle);
     padding: 20px;
     width: 0%;
     overflow: hidden;