Skip to content

Commit

Permalink
refactor: adaptive class name of theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@YangFong
YangFong committed Aug 4, 2024
1 parent f0aa1b5 commit e547228
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 123 deletions.
210 changes: 106 additions & 104 deletions src/assets/less/theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,125 +11,127 @@
@nightButtonHoverColor: #84868b;
@nightLineColor: #84868b;

.container_night {
background-color: @nightBgColor;

.el-main {
.dark {
.container {
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 {
.CodeMirror {
caret-color: @nightFontColor;
color: @nightFontColor;
background-color: @nightCodeMirrorColor;
box-shadow: inset 0 0 0 1px rgba(233, 231, 231, 0.102);
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-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 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 .CodeMirror-activeline-background {
background-color: transparent;
}

.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
}
.cm-s-xq-light span.cm-string {
color: @nightLinkColor;
}

.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
}
.cm-s-xq-light span.cm-link {
color: @nightLinkTextColor;
}

.editor__header {
background-color: @nightHeaderColor;
}
.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;
// }

// .el-tabs__nav-wrap::after {
// background-color: @nightLineColor;
// }

// .is-active {
// color: @nightWhiteColor;
// }

// .el-upload-dragger {
// background-color: @nightButtonBg;
// }
// }

// :deep(
// .el-icon-upload,
// .el-icon-download,
// .el-icon-refresh,
// .el-icon-s-grid,
// .el-icon-document
// ) {
// color: @nightWhiteColor;
// }

::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
// .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;
// }

// .el-tabs__nav-wrap::after {
// background-color: @nightLineColor;
// }

// .is-active {
// color: @nightWhiteColor;
// }

// .el-upload-dragger {
// background-color: @nightButtonBg;
// }
// }

// :deep(
// .el-icon-upload,
// .el-icon-download,
// .el-icon-refresh,
// .el-icon-s-grid,
// .el-icon-document
// ) {
// color: @nightWhiteColor;
// }

::-webkit-scrollbar {
background-color: @nightCodeMirrorColor;
}
}
}

Expand Down
24 changes: 5 additions & 19 deletions src/views/CodemirrorEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ export default {
cssEditor: state => state.cssEditor,
currentSize: state => state.currentSize,
currentColor: state => state.currentColor,
nightMode: state => state.nightMode,
codeTheme: state => state.codeTheme,
}),
},
Expand Down Expand Up @@ -533,7 +532,7 @@ export default {
</script>

<template>
<div class="container" :class="{ container_night: nightMode }">
<div class="container">
<el-container>
<el-header class="editor__header">
<EditorHeader
Expand Down Expand Up @@ -573,17 +572,14 @@ export default {
ref="preview"
:span="showCssEditor ? 8 : 12"
class="preview-wrapper"
:class="{
'preview-wrapper_night': nightMode && isCoping,
}"
>
<section
id="output-wrapper"
:class="{ output_night: nightMode && !backLight }"
:class="{ output_night: !backLight }"
>
<div class="preview">
<section id="output" v-html="output" />
<div v-if="nightMode && isCoping" class="loading-mask">
<div v-if="isCoping" class="loading-mask">
<div class="loading__img" />
<span>正在生成</span>
</div>
Expand Down Expand Up @@ -651,16 +647,6 @@ export default {
height: 100%;
}
.preview-wrapper_night {
overflow-y: inherit;
position: relative;
left: -3px;
.preview {
background-color: #fff;
}
}
#output-wrapper {
position: relative;
user-select: text;
Expand All @@ -675,8 +661,8 @@ export default {
height: 101%;
padding-top: 1px;
font-size: 15px;
color: gray;
background-color: #1e1e1e;
color: var(--el-text-color-regular);
background-color: var(--el-bg-color);
.loading__img {
position: absolute;
Expand Down

0 comments on commit e547228

Please sign in to comment.