update

src/assets/styles/antd.scss

@@ -5,8 +5,8 @@
   display: none;
 }
 .ant-popover-inner {
-  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
-  border: 1px solid #eee;
+  box-shadow: $boxShadow;
+  border: 1px solid $borderColor;
 }
 .ant-popover-inner-content {
   padding: 12px !important;

src/assets/styles/global.scss

@@ -31,7 +31,7 @@ html, body {
   height: 100%;
   overflow: hidden;
   background-color: #fff;
-  color: #333;
+  color: $textColor;
 }
 ol, ul {
   list-style: none;

src/assets/styles/prosemirror.scss

@@ -33,7 +33,7 @@
   }
 
   code {
-    background-color: #eee;
+    background-color: $borderColor;
     padding: 1px 3px;
     margin: 0 1px;
     border-radius: 2px;

src/assets/styles/variable.scss

@@ -1,3 +1,8 @@
 $themeColor: #d14424;
 $textColor: #41464b;
+$borderColor: #eee;
+$lightGray: #f9f9f9;
+
+$boxShadow: 3px 3px 3px rgba(#000, 0.15);
+
 $borderRadius: 2px;

src/components/Contextmenu/ContextmenuContent.vue

@@ -59,8 +59,8 @@ $subMenuWidth: 120px;
   width: $menuWidth;
   padding: 5px 0;
   background: #fff;
-  border: 1px solid #eee;
-  box-shadow: 3px 3px 3px rgba(#000, 0.15);
+  border: 1px solid $borderColor;
+  box-shadow: $boxShadow;
   border-radius: 2px;
   list-style: none;
   margin: 0;

src/views/Editor/Canvas/index.vue

@@ -249,7 +249,7 @@ export default defineComponent({
   height: 100%;
   user-select: none;
   overflow: hidden;
-  background-color: #f9f9f9;
+  background-color: $lightGray;
   position: relative;
 }
 .viewport-wrapper {

src/views/Editor/CanvasTool/index.vue

@@ -143,7 +143,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .canvas-tool {
   position: relative;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $borderColor;
   background-color: #fff;
   display: flex;
   justify-content: space-between;

src/views/Editor/EditorHeader/index.vue

@@ -33,7 +33,7 @@ export default defineComponent({
 .editor-header {
   background-color: #fff;
   user-select: none;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $borderColor;
   display: flex;
   justify-content: space-between;
   padding: 0 10px;
@@ -45,7 +45,6 @@ export default defineComponent({
 }
 .menu-item {
   font-size: 13px;
-  color: $textColor;
   margin: 0 10px;
   cursor: pointer;
 

src/views/Editor/Thumbnails/index.vue

@@ -139,7 +139,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .thumbnails {
-  border-right: solid 1px #eee;
+  border-right: solid 1px $borderColor;
   background-color: #fff;
   display: flex;
   flex-direction: column;
@@ -152,7 +152,7 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $borderColor;
   cursor: pointer;
 }
 .thumbnail-list {

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -138,7 +138,7 @@ export default defineComponent({
   margin-bottom: 10px;
   border-left: 4px solid #aaa;
   background-color: #eee;
-  padding-left: 10px;
+  padding: 2px 0 3px 10px;
 }
 .pool-item-wrapper {
   @include grid-layout-wrapper();
@@ -150,7 +150,7 @@ export default defineComponent({
   height: 40px;
   line-height: 40px;
   text-align: center;
-  background-color: #f5f5f5;
+  background-color: $lightGray;
   cursor: pointer;
 }
 
@@ -158,7 +158,7 @@ export default defineComponent({
   height: 32px;
   display: flex;
   align-items: center;
-  border: 1px solid #eee;
+  border: 1px solid $borderColor;
   padding: 6px;
   border-radius: $borderRadius;
   margin-bottom: 5px;

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 
 export default defineComponent({
   name: 'slide-style-panel',

src/views/Editor/Toolbar/index.vue

@@ -90,7 +90,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .toolbar {
-  border-left: solid 1px #eee;
+  border-left: solid 1px $borderColor;
   background-color: #fff;
   display: flex;
   flex-direction: column;
@@ -106,8 +106,8 @@ export default defineComponent({
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #eee;
+  background-color: $lightGray;
+  border-bottom: 1px solid $borderColor;
   cursor: pointer;
 
   &.active {
@@ -116,7 +116,7 @@ export default defineComponent({
   }
 
   & + .tab {
-    border-left: 1px solid #eee;
+    border-left: 1px solid $borderColor;
   }
 }
 .content {