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 {