Skip to content

Commit

Permalink
style: optimize dark themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@YangFong
YangFong committed Aug 4, 2024
1 parent e3c9735 commit f0aa1b5
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 123 deletions.
11 changes: 6 additions & 5 deletions src/assets/less/app.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,12 @@ section {
}

.preview-wrapper {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
display: flex;
//word-break: break-all;
padding: 0;
overflow-y: scroll;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.main-section {
Expand All @@ -104,7 +103,9 @@ section {
font-size: 14px;
box-sizing: border-box;
outline: none;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
color: var(--el-text-color-regular);
background: var(--el-bg-color);
box-shadow: var(--el-box-shadow);
}

.preview table {
Expand Down
120 changes: 60 additions & 60 deletions src/assets/less/theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,66 +67,66 @@
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;
}
// .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
22 changes: 11 additions & 11 deletions src/assets/scripts/themes/default-theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default {
'margin': `2em auto 1em`,
'padding': `0 1em`,
'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

// 二级标题样式
Expand All @@ -38,7 +38,7 @@ export default {
'line-height': `1.2`,
'padding-left': `8px`,
'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

// 四级标题样式
Expand All @@ -53,7 +53,7 @@ export default {
p: {
'margin': `1.5em 8px`,
'letter-spacing': `0.1em`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
'text-align': `justify`,
},

Expand Down Expand Up @@ -98,25 +98,25 @@ export default {
ol: {
'margin-left': `0`,
'padding-left': `1em`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

ul: {
'margin-left': `0`,
'padding-left': `1em`,
'list-style': `circle`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

footnotes: {
'margin': `0.5em 8px`,
'font-size': `80%`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

figure: {
margin: `1.5em 8px`,
color: baseColor,
'color': 'var(--el-text-color-regular)',
},
hr: {
'border-style': `solid`,
Expand All @@ -133,7 +133,7 @@ export default {
'text-indent': `-1em`,
'display': `block`,
'margin': `0.2em 8px`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

codespan: {
Expand Down Expand Up @@ -164,13 +164,13 @@ export default {
'border-collapse': `collapse`,
'text-align': `center`,
'margin': `1em 8px`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

thead: {
'background': `rgba(0, 0, 0, 0.05)`,
'font-weight': `bold`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

td: {
Expand All @@ -181,7 +181,7 @@ export default {

footnote: {
'font-size': `12px`,
'color': baseColor,
'color': 'var(--el-text-color-regular)',
},

figcaption: {
Expand Down
16 changes: 3 additions & 13 deletions src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
<script>
import { mapState } from 'pinia'
import { useStore } from '@/stores'
export default {
props: {
showResetConfirm: {
Expand All @@ -10,21 +7,14 @@ export default {
},
},
emits: [`close`, `confirm`],
computed: {
btnType() {
return this.nightMode ? `default` : `primary`
},
...mapState(useStore, {
nightMode: state => state.nightMode,
}),
},
}
</script>

<template>
<el-dialog
title="提示"
class="reset__dialog"
width="30%"
:model-value="showResetConfirm"
center
@close="$emit('close')"
Expand All @@ -33,10 +23,10 @@ export default {
此操作将丢失本地自定义样式，是否继续?
</div>
<template #footer>
<el-button :type="btnType" plain @click="$emit('close')">
<el-button plain @click="$emit('close')">
取 消
</el-button>
<el-button :type="btnType" plain @click="$emit('confirm')">
<el-button plain type="primary" @click="$emit('confirm')">
确 定
</el-button>
</template>
Expand Down
21 changes: 16 additions & 5 deletions src/components/CodemirrorEditor/EditorHeader/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,6 @@ export default {
}
},
computed: {
btnType() {
return this.nightMode ? `default` : `primary`
},
...mapState(useStore, {
output: state => state.output,
editor: state => state.editor,
Expand Down Expand Up @@ -225,6 +222,12 @@ export default {
return tempDiv.innerHTML
}
// 如果是暗黑模式，复制之前需要先切换到白天模式
const isDark = this.nightMode;
if (isDark) {
this.themeChanged()
}
solveWeChatImage()
const clipboardDiv = document.getElementById(`output`)
Expand All @@ -239,6 +242,8 @@ export default {
)
// 公众号不支持 position， 转换为等价的 translateY
.replace(/top:(.*?)em/g, `transform: translateY($1em)`)
// 适配主题中的颜色变量
.replaceAll(`var(--el-text-color-regular)`, `#3f3f3f`)
clipboardDiv.focus()
window.getSelection().removeAllRanges()
const range = document.createRange()
Expand All @@ -249,6 +254,11 @@ export default {
document.execCommand(`copy`)
window.getSelection().removeAllRanges()
clipboardDiv.innerHTML = this.output
if (isDark) {
this.themeChanged()
}
// 输出提示
this.$notify({
showClose: true,
Expand All @@ -257,6 +267,7 @@ export default {
duration: 1600,
type: `success`,
})
this.$emit(`refresh`)
this.$emit(`endCopy`)
}, 350)
Expand Down Expand Up @@ -505,10 +516,10 @@ export default {
</el-dropdown>
<HelpDropdown />
</el-space>
<el-button plain :type="btnType" @click="copy">
<el-button plain type="primary" @click="copy">
复制
</el-button>
<el-button plain :type="btnType" @click="prePost">
<el-button plain type="primary" @click="prePost">
发布
</el-button>

Expand Down
12 changes: 2 additions & 10 deletions src/components/CodemirrorEditor/InsertFormDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,7 @@ export default {
}
},
computed: {
btnType() {
return this.nightMode ? `default` : `primary`
},
...mapState(useStore, {
nightMode: state => state.nightMode,
editor: state => state.editor,
}),
},
Expand Down Expand Up @@ -100,10 +96,10 @@ export default {
</table>
<template #footer>
<div class="dialog-footer">
<el-button :type="btnType" plain @click="$emit('close')">
<el-button plain @click="$emit('close')">
取 消
</el-button>
<el-button :type="btnType" plain @click="insertTable">
<el-button type="primary" plain @click="insertTable">
确 定
</el-button>
</div>
Expand All @@ -125,8 +121,4 @@ export default {
.input-table :deep(.el-input__inner) {
border-radius: 0;
}
.head-style :deep(.el-input__wrapper) {
background-color: #f2f2f2;
}
</style>
Loading

0 comments on commit f0aa1b5

Please sign in to comment.