diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 640363a..0cd2090 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -6,67 +6,84 @@
@nightFontColor: gray;
@nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b;
-@nightWhiteColor: #ffffff;
+@nightWhiteColor: #f0f0f0;
@nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #84868b;
+@nightLineColor: #84868b;
+
.container_night {
background-color: @nightBgColor;
+
.el-main {
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);
}
+
.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;
+ 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 {
background-color: transparent;
}
+
.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
}
+
.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
}
+
.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,
@@ -74,29 +91,40 @@
.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;
}
}
+
::v-deep .el-icon-upload,
.el-icon-download,
.el-icon-refresh,
.el-icon-s-grid {
color: @nightWhiteColor;
}
+
::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
}
diff --git a/src/components/CodemirrorEditor/aboutDialog.vue b/src/components/CodemirrorEditor/aboutDialog.vue
index de16e94..bb35cb1 100644
--- a/src/components/CodemirrorEditor/aboutDialog.vue
+++ b/src/components/CodemirrorEditor/aboutDialog.vue
@@ -50,4 +50,8 @@ export default {
};
-
+
diff --git a/src/components/CodemirrorEditor/insertForm.vue b/src/components/CodemirrorEditor/insertForm.vue
index 7cd74fc..7a80556 100644
--- a/src/components/CodemirrorEditor/insertForm.vue
+++ b/src/components/CodemirrorEditor/insertForm.vue
@@ -105,6 +105,11 @@ export default {