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 {