From f0aa1b50ae7014c83f1c76f46d60545eda543a9e Mon Sep 17 00:00:00 2001
From: YangFong <yangfong2022@qq.com>
Date: Sun, 4 Aug 2024 18:31:30 +0800
Subject: [PATCH] style: optimize dark themes

---
 src/assets/less/app.less                      |  11 +-
 src/assets/less/theme.less                    | 120 +++++++++---------
 src/assets/scripts/themes/default-theme.js    |  22 ++--
 .../EditorHeader/ResetDialog.vue              |  16 +--
 .../CodemirrorEditor/EditorHeader/index.vue   |  21 ++-
 .../CodemirrorEditor/InsertFormDialog.vue     |  12 +-
 src/components/RunLoading.vue                 |  22 +---
 src/element/index.js                          |   1 +
 src/stores/index.js                           |   7 +-
 9 files changed, 109 insertions(+), 123 deletions(-)

diff --git a/src/assets/less/app.less b/src/assets/less/app.less
index c3ca452f8..157eb1003 100644
--- a/src/assets/less/app.less
+++ b/src/assets/less/app.less
@@ -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 {
@@ -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 {
diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index fca7fa6ed..d0e9cd30a 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -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;
diff --git a/src/assets/scripts/themes/default-theme.js b/src/assets/scripts/themes/default-theme.js
index ad6f9576e..dfb014944 100644
--- a/src/assets/scripts/themes/default-theme.js
+++ b/src/assets/scripts/themes/default-theme.js
@@ -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)',
     },
 
     // 二级标题样式
@@ -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)',
     },
 
     // 四级标题样式
@@ -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`,
     },
 
@@ -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`,
@@ -133,7 +133,7 @@ export default {
       'text-indent': `-1em`,
       'display': `block`,
       'margin': `0.2em 8px`,
-      'color': baseColor,
+      'color': 'var(--el-text-color-regular)',
     },
 
     codespan: {
@@ -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: {
@@ -181,7 +181,7 @@ export default {
 
     footnote: {
       'font-size': `12px`,
-      'color': baseColor,
+      'color': 'var(--el-text-color-regular)',
     },
 
     figcaption: {
diff --git a/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue b/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
index c461c85d4..7b243edb4 100644
--- a/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue
@@ -1,7 +1,4 @@
 <script>
-import { mapState } from 'pinia'
-import { useStore } from '@/stores'
-
 export default {
   props: {
     showResetConfirm: {
@@ -10,14 +7,6 @@ export default {
     },
   },
   emits: [`close`, `confirm`],
-  computed: {
-    btnType() {
-      return this.nightMode ? `default` : `primary`
-    },
-    ...mapState(useStore, {
-      nightMode: state => state.nightMode,
-    }),
-  },
 }
 </script>
 
@@ -25,6 +14,7 @@ export default {
   <el-dialog
     title="提示"
     class="reset__dialog"
+    width="30%"
     :model-value="showResetConfirm"
     center
     @close="$emit('close')"
@@ -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>
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index d224fb728..bd2741f00 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -70,9 +70,6 @@ export default {
     }
   },
   computed: {
-    btnType() {
-      return this.nightMode ? `default` : `primary`
-    },
     ...mapState(useStore, {
       output: state => state.output,
       editor: state => state.editor,
@@ -225,6 +222,12 @@ export default {
           return tempDiv.innerHTML
         }
 
+        // 如果是暗黑模式，复制之前需要先切换到白天模式
+        const isDark = this.nightMode;
+        if (isDark) {
+          this.themeChanged()
+        }
+
         solveWeChatImage()
 
         const clipboardDiv = document.getElementById(`output`)
@@ -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()
@@ -249,6 +254,11 @@ export default {
         document.execCommand(`copy`)
         window.getSelection().removeAllRanges()
         clipboardDiv.innerHTML = this.output
+
+        if (isDark) {
+          this.themeChanged()
+        }
+
         // 输出提示
         this.$notify({
           showClose: true,
@@ -257,6 +267,7 @@ export default {
           duration: 1600,
           type: `success`,
         })
+
         this.$emit(`refresh`)
         this.$emit(`endCopy`)
       }, 350)
@@ -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>
 
diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
index a4db68c3d..a92dfd5b2 100644
--- a/src/components/CodemirrorEditor/InsertFormDialog.vue
+++ b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -22,11 +22,7 @@ export default {
     }
   },
   computed: {
-    btnType() {
-      return this.nightMode ? `default` : `primary`
-    },
     ...mapState(useStore, {
-      nightMode: state => state.nightMode,
       editor: state => state.editor,
     }),
   },
@@ -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>
@@ -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>
diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
index ed5b65588..d3f15795e 100644
--- a/src/components/RunLoading.vue
+++ b/src/components/RunLoading.vue
@@ -4,8 +4,6 @@ import { useStore } from '@/stores'
 
 const loading = ref(true)
 
-const nightMode = useStore().nightMode
-
 onMounted(() => {
   setTimeout(() => {
     loading.value = false
@@ -18,21 +16,15 @@ onMounted(() => {
     <div
       v-if="loading"
       class="loading"
-      :class="{
-        loading_night: nightMode,
-      }"
     >
-      <strong>致力于让 Markdown 编辑更简单</strong>
+      <el-text size="large" tag="strong">
+        致力于让 Markdown 编辑更简单
+      </el-text>
     </div>
   </transition>
 </template>
 
 <style lang="less" scoped>
-@light-color: #303133;
-@light-background-color: #f2f2f2;
-@night-color: #bbbbbb;
-@night-background-color: #303133;
-
 .loading {
   position: fixed;
   z-index: 99999;
@@ -43,8 +35,7 @@ onMounted(() => {
   width: 100vw;
   height: 100vh;
   font-size: 18px;
-  color: @light-color;
-  background-color: @light-background-color;
+  background-color: var(--el-bg-color-page);
 
   &::before {
     content: url('../assets/images/favicon.png');
@@ -54,11 +45,6 @@ onMounted(() => {
   }
 }
 
-.loading_night {
-  color: @night-color;
-  background-color: @night-background-color;
-}
-
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
diff --git a/src/element/index.js b/src/element/index.js
index 4449da32d..384baf1ae 100644
--- a/src/element/index.js
+++ b/src/element/index.js
@@ -1,6 +1,7 @@
 import ElementPlus, { ElLoading, ElMessage } from 'element-plus'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 
 export default {
   install(app) {
diff --git a/src/stores/index.js b/src/stores/index.js
index c4ec1b07b..19b845a2d 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -2,6 +2,7 @@ import { markRaw, ref } from 'vue'
 import { createPinia, defineStore } from 'pinia'
 import { marked } from 'marked'
 import CodeMirror from 'codemirror/lib/codemirror'
+import { useDark, useToggle } from '@vueuse/core'
 
 import config from '../assets/scripts/config'
 import WxRenderer from '../assets/scripts/renderers/wx-renderer'
@@ -14,6 +15,9 @@ const modPrefix
   = defaultKeyMap === CodeMirror.keyMap.macDefault ? `Cmd` : `Ctrl`
 
 export const useStore = defineStore(`store`, () => {
+  const isDark = useDark()
+  const toggleDark = useToggle(isDark)
+
   const wxRenderer = ref(null)
   const output = ref(``)
   const html = ref(``)
@@ -23,7 +27,7 @@ export const useStore = defineStore(`store`, () => {
   const currentSize = ref(``)
   const currentColor = ref(``)
   const citeStatus = ref(false)
-  const nightMode = ref(false)
+  const nightMode = ref(isDark.value)
   const codeTheme = ref(config.codeThemeOption[2].value)
   const legend = ref(config.legendOption[3].value)
   const isMacCodeBlock = ref(true)
@@ -71,6 +75,7 @@ export const useStore = defineStore(`store`, () => {
     localStorage.setItem(`isEditOnLeft`, data)
   }
   const themeChanged = () => {
+    toggleDark()
     nightMode.value = !nightMode.value
     localStorage.setItem(`nightMode`, nightMode.value)
   }