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;
+        color: @nightWhiteColor;
-        border: 1px solid @nightButtonHoverColor;
+        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/header.vue

@@ -26,24 +26,24 @@
             <el-select v-model="selectFont" size="mini" placeholder="选择字体" clearable @change="fontChanged">
                 <el-option v-for="font in config.builtinFonts" :style="{fontFamily: font.value}" :key="font.value"
                 :label="font.label" :value="font.value">
-                <span class="select-item-left">{{ font.label }}</span>
+                    <span class="select-item-left">{{ font.label }}</span>
-                <span class="select-item-right">Abc</span>
+                    <span class="select-item-right">Abc</span>
                 </el-option>
             </el-select>
             </el-form-item>
             <el-form-item>
             <el-select v-model="selectSize" size="mini" placeholder="选择段落字号" clearable @change="sizeChanged">
                 <el-option v-for="size in config.sizeOption" :key="size.value" :label="size.label" :value="size.value">
-                <span class="select-item-left">{{ size.label }}</span>
+                    <span class="select-item-left">{{ size.label }}</span>
-                <span class="select-item-right">{{ size.desc }}</span>
+                    <span class="select-item-right">{{ size.desc }}</span>
                 </el-option>
             </el-select>
             </el-form-item>
             <el-form-item>
             <el-select v-model="selectColor" size="mini" placeholder="选择颜色" clearable @change="colorChanged">
                 <el-option v-for="color in config.colorOption" :key="color.value" :label="color.label" :value="color.value">
-                <span class="select-item-left">{{ color.label }}</span>
+                    <span class="select-item-left">{{ color.label }}</span>
-                <span class="select-item-right">{{ color.hex }}</span>
+                    <span class="select-item-right">{{ color.hex }}</span>
                 </el-option>
             </el-select>
             </el-form-item>

src/components/codeMirror/insertForm.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-dialog title="插入表格" :visible="dialogFormVisible" @close="$emit('close')">
+    <el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
-        <el-form :model="config.form">
+        <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="btnType" plain @click="$emit('close')">取 消</el-button>
-            <el-button type="success" @click="insertTable">确 定</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;
 }