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" />