feature: dialog-night

src/assets/less/theme.less

@@ -6,11 +6,14 @@
 @nightFontColor: gray;
 @nightLinkColor: #8e9eb9;
 @nightLinkTextColor: #84868b;
-@nightBorderColor: #ffffff;
+@nightWhiteColor: #ffffff;
 @nightButtonBg: #1e1e1e;
 @nightButtonHoverColor: #84868b;
 .container_night {
     background-color: @nightBgColor;
+    .el-main {
+        background-color: @nightBgColor;
+    }
     .CodeMirror  {
         caret-color: @nightFontColor;
         color: @nightFontColor;
@@ -25,7 +28,11 @@
         background-color: @nightCodeMirrorColor;
         box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
     }
-    .cm-s-xq-light span.cm-variable-2 {
+    .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 .CodeMirror-activeline-background {
@@ -41,20 +48,31 @@
         background-color: @nightHeaderColor;
     }
     .el-button {
-        color: @nightBorderColor;
+        color: @nightWhiteColor;
         background-color: @nightCodeMirrorColor;
-        border: 1px solid #eeeeee;
+        border: 1px solid transparent;
     }
     .el-button.is-plain:focus, .el-button.is-plain:hover {
         background: @nightButtonBg;
-        color: @nightButtonHoverColor;
-        border: 1px solid @nightButtonHoverColor;
+        color: @nightWhiteColor;
+        border: 1px solid @nightWhiteColor;
         i {
-            color: @nightButtonHoverColor;
+            color: @nightWhiteColor;
+        }
+    }
+    .insert__dialog, .about__dialog {
+        .el-dialog {
+            background-color: @nightBgColor;
+        }
+        .el-dialog__body {
+            color: @nightWhiteColor;
+        }
+        .el-dialog__title, .el-form-item__label {
+            color: @nightWhiteColor;
         }
     }
     i {
-        color: #ffffff;
+        color: @nightWhiteColor;
     }
     ::-webkit-scrollbar {
         background-color: @nightCodeMirrorColor;

src/components/codeMirror/aboutDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="关于" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center>
+    <el-dialog title="关于" class="about__dialog" :visible="aboutDialogVisible" @close="$emit('close')" width="30%" center>
         <div style="text-align: center;">
             <h3>一款高度简洁的微信 Markdown 编辑器</h3>
         </div>

src/components/codeMirror/insertForm.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')">
-        <el-form :model="config.form">
+    <el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
+        <el-form class="insert__form" :model="config.form">
             <el-form-item label="行数(表头不计入行数)">
             <el-input v-model="config.form.rows"></el-input>
             </el-form-item>
@@ -9,8 +9,8 @@
             </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-            <el-button type="success" plain @click="$emit('close')">取 消</el-button>
-            <el-button type="success" @click="insertTable">确 定</el-button>
+            <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+            <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
         </div>
     </el-dialog>
 </template>
@@ -31,7 +31,11 @@ export default {
         }
     },
     computed: {
+        btnType() {
+            return !this.nightMode ? 'success' : 'default';
+        },
         ...mapState({
+            nightMode: state=> state.nightMode,
             editor: state=> state.editor
         })
     },

src/view/CodemirrorEditor.vue

@@ -250,6 +250,11 @@ export default {
     padding-top: 12px;
     overflow: hidden;
 }
+.el-main {
+    transition: all .3s;
+    padding: 0;
+    margin: 20px;
+}
 .container {
     transition: all .3s;
 }