diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 640363a..24e62ce 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -6,98 +6,126 @@
@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);
+
+ .el-main {
+ background-color: @nightBgColor;
}
- .preview-wrapper {
- background-color: @nightCodeMirrorColor;
- box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
+
+ .CodeMirror {
+ caret-color: @nightFontColor;
+ color: @nightFontColor;
+ background-color: @nightCodeMirrorColor;
+ 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-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;
+
+ .cm-s-style-mirror .CodeMirror-matchingbracket {
+ color: @nightWhiteColor !important;
+ background: rgb(30, 30, 30) !important;
}
- }
- .insert__dialog,
- .about__dialog,
- .reset__dialog,
- .upload__dialog {
- .el-dialog {
- background-color: @nightBgColor;
+
+ .cm-s-xq-light span.cm-variable-2,
+ .cm-s-style-mirror span.cm-tag {
+ color: @nightFontColor;
}
- .el-dialog__body {
- color: @nightWhiteColor;
+
+ .cm-s-xq-light .CodeMirror-activeline-background {
+ background-color: transparent;
}
- .el-dialog__title,
- .el-form-item__label {
- color: @nightWhiteColor;
+
+ .cm-s-xq-light span.cm-string {
+ color: @nightLinkColor;
}
- .el-tabs__item {
- color: @nightActiveCodeMirrorColor;
+
+ .cm-s-xq-light span.cm-link {
+ color: @nightLinkTextColor;
}
- .is-active {
- color: @nightWhiteColor;
+
+ .editor__header {
+ background-color: @nightHeaderColor;
}
- .el-upload-dragger {
- background-color: @nightButtonBg;
+
+ .el-button {
+ color: @nightWhiteColor;
+ background-color: @nightCodeMirrorColor;
+ border: 1px solid transparent;
}
- }
- ::v-deep .el-icon-upload,
- .el-icon-download,
- .el-icon-refresh,
- .el-icon-s-grid {
- color: @nightWhiteColor;
- }
- ::-webkit-scrollbar {
- background-color: @nightCodeMirrorColor;
- }
-}
+
+ .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;
+ }
+ }
+
+ ::v-deep .el-icon-upload,
+ .el-icon-download,
+ .el-icon-refresh,
+ .el-icon-s-grid {
+ color: @nightWhiteColor;
+ }
+
+ ::-webkit-scrollbar {
+ background-color: @nightCodeMirrorColor;
+ }
+}
\ No newline at end of file
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 {