diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index d0e9cd30a..18a1e27da 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -11,125 +11,127 @@
 @nightButtonHoverColor: #84868b;
 @nightLineColor: #84868b;
 
-.container_night {
-  background-color: @nightBgColor;
-
-  .el-main {
+.dark {
+  .container {
     background-color: @nightBgColor;
-  }
-
-  .CodeMirror {
-    caret-color: @nightFontColor;
-    color: @nightFontColor;
-    background-color: @nightCodeMirrorColor;
-    box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
-  }
 
-  .output_night {
-    .preview {
-      background-color: @nightPreviewColor;
-      box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
+    .el-main {
+      background-color: @nightBgColor;
     }
 
-    .preview-wrapper {
+    .CodeMirror {
+      caret-color: @nightFontColor;
+      color: @nightFontColor;
       background-color: @nightCodeMirrorColor;
-      box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
+      box-shadow: inset 0 0 0 1px rgba(100, 37, 37, 0.102);
     }
 
-    .code-snippet__fix {
-      background-color: rgb(238, 238, 238);
+    .output_night {
+      .preview {
+        background-color: @nightPreviewColor;
+        box-shadow: 0 0 70px rgba(0, 0, 0, 0.3);
+      }
+
+      .preview-wrapper {
+        background-color: @nightCodeMirrorColor;
+        box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
+      }
+
+      .code-snippet__fix {
+        background-color: rgb(238, 238, 238);
+      }
     }
-  }
 
-  .cm-s-style-mirror .CodeMirror-matchingbracket {
-    color: @nightWhiteColor !important;
-    background: rgb(30, 30, 30) !important;
-  }
+    .cm-s-style-mirror .CodeMirror-matchingbracket {
+      color: @nightWhiteColor !important;
+      background: rgb(30, 30, 30) !important;
+    }
 
-  .cm-s-xq-light span.cm-variable-2,
-  .cm-s-style-mirror span.cm-tag {
-    color: @nightFontColor;
-  }
+    .cm-s-xq-light span.cm-variable-2,
+    .cm-s-style-mirror span.cm-tag {
+      color: @nightFontColor;
+    }
 
-  .cm-s-xq-light .CodeMirror-activeline-background {
-    background-color: transparent;
-  }
+    .cm-s-xq-light .CodeMirror-activeline-background {
+      background-color: transparent;
+    }
 
-  .cm-s-xq-light span.cm-string {
-    color: @nightLinkColor;
-  }
+    .cm-s-xq-light span.cm-string {
+      color: @nightLinkColor;
+    }
 
-  .cm-s-xq-light span.cm-link {
-    color: @nightLinkTextColor;
-  }
+    .cm-s-xq-light span.cm-link {
+      color: @nightLinkTextColor;
+    }
 
-  .editor__header {
-    background-color: @nightHeaderColor;
-  }
+    .editor__header {
+      background-color: @nightHeaderColor;
+    }
 
-  // .el-button {
-  //   color: @nightWhiteColor;
-  //   background-color: @nightCodeMirrorColor;
-  //   border: 1px solid transparent;
-  // }
-
-  // .el-button.is-plain:focus,
-  // .el-button.is-plain:hover {
-  //   background: @nightButtonBg;
-  //   color: @nightWhiteColor;
-  //   border: 1px solid @nightWhiteColor;
-
-  //   i {
-  //     color: @nightWhiteColor;
-  //   }
-  // }
-
-  // .insert__dialog,
-  // .about__dialog,
-  // .reset__dialog,
-  // .upload__dialog {
-  //   .el-dialog {
-  //     background-color: @nightBgColor;
-  //   }
-
-  //   .el-dialog__body {
-  //     color: @nightWhiteColor;
-  //   }
-
-  //   .el-dialog__title,
-  //   .el-form-item__label {
-  //     color: @nightWhiteColor;
-  //   }
-
-  //   .el-tabs__item {
-  //     color: @nightActiveCodeMirrorColor;
-  //   }
-
-  //   .el-tabs__nav-wrap::after {
-  //     background-color: @nightLineColor;
-  //   }
-
-  //   .is-active {
-  //     color: @nightWhiteColor;
-  //   }
-
-  //   .el-upload-dragger {
-  //     background-color: @nightButtonBg;
-  //   }
-  // }
-
-  // :deep(
-  //     .el-icon-upload,
-  //     .el-icon-download,
-  //     .el-icon-refresh,
-  //     .el-icon-s-grid,
-  //     .el-icon-document
-  //   ) {
-  //   color: @nightWhiteColor;
-  // }
-
-  ::-webkit-scrollbar {
-    background-color: @nightCodeMirrorColor;
+    // .el-button {
+    //   color: @nightWhiteColor;
+    //   background-color: @nightCodeMirrorColor;
+    //   border: 1px solid transparent;
+    // }
+
+    // .el-button.is-plain:focus,
+    // .el-button.is-plain:hover {
+    //   background: @nightButtonBg;
+    //   color: @nightWhiteColor;
+    //   border: 1px solid @nightWhiteColor;
+
+    //   i {
+    //     color: @nightWhiteColor;
+    //   }
+    // }
+
+    // .insert__dialog,
+    // .about__dialog,
+    // .reset__dialog,
+    // .upload__dialog {
+    //   .el-dialog {
+    //     background-color: @nightBgColor;
+    //   }
+
+    //   .el-dialog__body {
+    //     color: @nightWhiteColor;
+    //   }
+
+    //   .el-dialog__title,
+    //   .el-form-item__label {
+    //     color: @nightWhiteColor;
+    //   }
+
+    //   .el-tabs__item {
+    //     color: @nightActiveCodeMirrorColor;
+    //   }
+
+    //   .el-tabs__nav-wrap::after {
+    //     background-color: @nightLineColor;
+    //   }
+
+    //   .is-active {
+    //     color: @nightWhiteColor;
+    //   }
+
+    //   .el-upload-dragger {
+    //     background-color: @nightButtonBg;
+    //   }
+    // }
+
+    // :deep(
+    //     .el-icon-upload,
+    //     .el-icon-download,
+    //     .el-icon-refresh,
+    //     .el-icon-s-grid,
+    //     .el-icon-document
+    //   ) {
+    //   color: @nightWhiteColor;
+    // }
+
+    ::-webkit-scrollbar {
+      background-color: @nightCodeMirrorColor;
+    }
   }
 }
 
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index ce87cb035..9d714c7bb 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -64,7 +64,6 @@ export default {
       cssEditor: state => state.cssEditor,
       currentSize: state => state.currentSize,
       currentColor: state => state.currentColor,
-      nightMode: state => state.nightMode,
       codeTheme: state => state.codeTheme,
     }),
   },
@@ -533,7 +532,7 @@ export default {
 </script>
 
 <template>
-  <div class="container" :class="{ container_night: nightMode }">
+  <div class="container">
     <el-container>
       <el-header class="editor__header">
         <EditorHeader
@@ -573,17 +572,14 @@ export default {
             ref="preview"
             :span="showCssEditor ? 8 : 12"
             class="preview-wrapper"
-            :class="{
-              'preview-wrapper_night': nightMode && isCoping,
-            }"
           >
             <section
               id="output-wrapper"
-              :class="{ output_night: nightMode && !backLight }"
+              :class="{ output_night: !backLight }"
             >
               <div class="preview">
                 <section id="output" v-html="output" />
-                <div v-if="nightMode && isCoping" class="loading-mask">
+                <div v-if="isCoping" class="loading-mask">
                   <div class="loading__img" />
                   <span>正在生成</span>
                 </div>
@@ -651,16 +647,6 @@ export default {
   height: 100%;
 }
 
-.preview-wrapper_night {
-  overflow-y: inherit;
-  position: relative;
-  left: -3px;
-
-  .preview {
-    background-color: #fff;
-  }
-}
-
 #output-wrapper {
   position: relative;
   user-select: text;
@@ -675,8 +661,8 @@ export default {
   height: 101%;
   padding-top: 1px;
   font-size: 15px;
-  color: gray;
-  background-color: #1e1e1e;
+  color: var(--el-text-color-regular);
+  background-color: var(--el-bg-color);
 
   .loading__img {
     position: absolute;