@nightBgColor: #333333;
@nightPreviewColor: #1e1e1e;
@nightHeaderColor: #3c3c3c;
@nightCodeMirrorColor: #1e1e1e;
@nightActiveCodeMirrorColor: gray;
@nightFontColor: gray;
@nightLinkColor: #8e9eb9;
@nightLinkTextColor: #84868b;
@nightWhiteColor: #ffffff;
@nightButtonBg: #1e1e1e;
@nightButtonHoverColor: #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;
        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, .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;
        }
        .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;
    }
}