From a4531be9049c8fd8e08b7e778949bc079eff8a95 Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Sun, 12 Feb 2023 12:10:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E9=83=A8=E5=88=86=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/CommonPage.vue    |  2 +-
 src/components/query-bar/QueryBar.vue |  2 +-
 src/views/demo/editor/md-editor.vue   |  5 +++--
 src/views/demo/editor/rich-text.vue   | 14 +++++++++++++-
 src/views/login/index.vue             |  1 +
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/page/CommonPage.vue b/src/components/page/CommonPage.vue
index 0339533..c71ae8d 100644
--- a/src/components/page/CommonPage.vue
+++ b/src/components/page/CommonPage.vue
@@ -3,7 +3,7 @@
     <header v-if="showHeader" px-15 mb-15 min-h-45 flex justify-between items-center>
       <slot v-if="$slots.header" name="header" />
       <template v-else>
-        <h2 color="#333" text-22 font-normal>{{ title || route.meta?.title }}</h2>
+        <h2 text-22 font-normal text-hex-333 dark:text-hex-ccc>{{ title || route.meta?.title }}</h2>
         <slot name="action" />
       </template>
     </header>
diff --git a/src/components/query-bar/QueryBar.vue b/src/components/query-bar/QueryBar.vue
index 1f6eb0f..3f248d5 100644
--- a/src/components/query-bar/QueryBar.vue
+++ b/src/components/query-bar/QueryBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div min-h-60 p-15 flex items-start justify-between b-1 bc-ccc rounded-8 bg="#fafafc">
+  <div min-h-60 p-15 flex items-start justify-between b-1 bc-ccc rounded-8 bg="#fafafc" dark:bg-black>
     <n-space wrap :size="[35, 15]">
       <slot />
     </n-space>
diff --git a/src/views/demo/editor/md-editor.vue b/src/views/demo/editor/md-editor.vue
index c82dd88..5bf78b8 100644
--- a/src/views/demo/editor/md-editor.vue
+++ b/src/views/demo/editor/md-editor.vue
@@ -1,9 +1,10 @@
 <template>
   <CommonPage>
-    <div h-60 pl-20 pr-20 flex items-center bg-white>
+    <div h-60 pl-20 pr-20 flex items-center bg-white dark:bg-dark>
       <input
         v-model="post.title"
         class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
+        dark:bg-dark
         type="text"
         placeholder="输入文章标题..."
       />
@@ -11,7 +12,7 @@
         <TheIcon v-if="!btnLoading" icon="line-md:confirm-circle" class="mr-5" :size="18" /> 保存
       </n-button>
     </div>
-    <MdEditor v-model="post.content" style="height: calc(100vh - 305px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 305px)" dark:bg-dark />
   </CommonPage>
 </template>
 
diff --git a/src/views/demo/editor/rich-text.vue b/src/views/demo/editor/rich-text.vue
index 7e457ed..c38715a 100644
--- a/src/views/demo/editor/rich-text.vue
+++ b/src/views/demo/editor/rich-text.vue
@@ -1,6 +1,6 @@
 <template>
   <AppPage>
-    <div h-full flex-col border-1 bc-ccc>
+    <div h-full flex-col border-1 bc-ccc dark:bg-dark>
       <WangToolbar border-b bc-ccc :editor="editorRef" :default-config="toolbarConfig" mode="default" />
       <WangEditor
         v-model="valueHtml"
@@ -27,3 +27,15 @@ const handleCreated = (editor) => {
   editorRef.value = editor
 }
 </script>
+
+<style>
+html.dark {
+  --w-e-textarea-bg-color: #333;
+  --w-e-textarea-color: #fff;
+  --w-e-toolbar-bg-color: #333;
+  --w-e-toolbar-color: #fff;
+  --w-e-toolbar-active-bg-color: #666;
+  --w-e-toolbar-active-color: #fff;
+  /* ...其他... */
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index e07e29f..3bcacb9 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,6 +3,7 @@
     <div
       style="transform: translateY(25px)"
       class="m-auto p-15 f-c-c min-w-345 max-w-700 rounded-10 card-shadow bg-white bg-opacity-60"
+      dark:bg-dark
     >
       <div w-380 hidden md:block px-20 py-35>
         <img src="@/assets/images/login_banner.webp" w-full alt="login_banner" />