diff --git a/app.vue b/app.vue
index 6bb99be..ac1289f 100644
--- a/app.vue
+++ b/app.vue
@@ -23,6 +23,7 @@ import {naiveThemeOverrides} from "~/settings/settings";
 
 const colorMode = useColorMode()
 const themeOverrides = naiveThemeOverrides
+
 const theme = computed(() => {
   return colorMode.value === 'system' ? (colorMode.value ? lightTheme : darkTheme) : colorMode.value === 'light' ? lightTheme : darkTheme
 })
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/components/common/History.vue b/components/common/History.vue
index 6b488f5..e507149 100644
--- a/components/common/History.vue
+++ b/components/common/History.vue
@@ -10,10 +10,10 @@ const {t} = useI18n()
   <div>
     <div title="Change Color">
       <div
-          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 dark:bg-gray-700"
+          class="cursor-pointer	flex h-10 w-10 items-center justify-center rounded-lg dark:bg-gray-700"
           @click="isOpen = true"
       >
-        <Icon name="ic:baseline-history" class=" text-lg dark:text-white" />
+        <Icon name="ic:baseline-history" class=" text-lg dark:text-white"/>
       </div>
     </div>
 
@@ -26,57 +26,60 @@ const {t} = useI18n()
 
       <NDrawerContent
           :title="t('history.title')"
-          class="w-full min-h-screen bg-gray-100 overflow-y-auto"
+          class="w-full min-h-screen overflow-y-auto  dark:text-white  dark:bg-[#000000FF]"
           closable
       >
         <div class="max-w-6xl mx-auto">
           <h1 class="text-2xl font-bold text-gray-800 mb-5 flex items-center justify-between">
-            <span class="text-sm text-gray-500 bg-gray-100 py-1 px-3 rounded-full">
-             {{ t('history.tips', { length: styleStore.getHistory.length }) }}
+            <span
+                class="text-sm text-gray-500 py-1 px-3 rounded-full  dark:text-white  dark:bg-[#000000FF]">
+             {{ t('history.tips', {length: styleStore.getHistory.length}) }}
             </span>
           </h1>
-          <div class="bg-white shadow-md rounded-lg">
+          <div class=" shadow-md rounded-lg ">
             <!-- 条件渲染，如果有历史记录则显示表格，否则显示提示 -->
             <div v-if="styleStore.getHistory.length">
-                <!-- 表格头部和内容 -->
-                <table class="min-w-full leading-normal">
-                  <thead>
-                  <tr>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      {{ t('history.domain') }}
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      {{ t('history.type') }}
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      {{ t('history.time') }}
-                    </th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                      {{ t('history.actions') }}
-                    </th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  <!-- 这里将使用循环来动态展示查询历史 -->
-                  <tr v-for="item in styleStore.getHistory" :key="item.id" class="border-b border-gray-200">
-                    <td class="px-5 py-5 text-sm bg-white">
-                      <NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
-                    </td>
-                    <td class="px-5 py-5 text-sm bg-white">
-                      {{ item.type }}
-                    </td>
-                    <td class="px-5 py-5 text-sm bg-white">
-                      {{ item.date }}
-                    </td>
-                    <td class="px-5 py-5 text-sm bg-white">
-                      <NButton
-                          @click="styleStore.deleteHistory(item.id)"
+              <!-- 表格头部和内容 -->
+              <table class="min-w-full leading-normal ">
+                <thead>
+                <tr>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.domain') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.type') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.time') }}
+                  </th>
+                  <th class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                    {{ t('history.actions') }}
+                  </th>
+                </tr>
+                </thead>
+                <tbody>
+                <!-- 这里将使用循环来动态展示查询历史 -->
+                <tr v-for="item in styleStore.getHistory" :key="item.id"
+                    class="border-b border-gray-200  dark:text-white  dark:bg-[#000000FF]">
+                  <td class="px-5 py-5 text-sm  ">
+                    <NuxtLink :to="item.path">{{ item.domain }}</NuxtLink>
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    {{ item.type }}
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    {{ item.date }}
+                  </td>
+                  <td class="px-5 py-5 text-sm ">
+                    <NButton
+                        @click="styleStore.deleteHistory(item.id)"
 
-                      >{{t('common.actions.delete')}}</NButton>
-                    </td>
-                  </tr>
-                  </tbody>
-                </table>
+                    >{{ t('common.actions.delete') }}
+                    </NButton>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
             </div>
             <div v-else class="text-center py-5">
               <p class="text-gray-500">{{ t('history.empty') }}</p>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 06eab7f..4c8f059 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,9 @@ export default defineNuxtConfig({
     features: {
         inlineStyles: true,
     },
+    css: [
+        '~/assets/css/main.css',
+    ],
     runtimeConfig: {
         public: {
             Domain: process.env.WebSiteDomain || 'Nuxt Whois',
@@ -53,9 +56,7 @@ export default defineNuxtConfig({
     headlessui: {
         prefix: 'Headless'
     },
-    naiveui: {
-        colorModePreference: "light",
-    },
+    naiveui: {},
     colorMode: {
         classSuffix: '',
     },
diff --git a/plugins/setTheme.client.ts b/plugins/setTheme.client.ts
deleted file mode 100644
index ad9498a..0000000
--- a/plugins/setTheme.client.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-    const colorMode = useColorMode()
-
-    // 页面加载完毕,如果是暗色模式则重新加载,见: https://github.com/tusen-ai/naive-ui/issues/3765#issuecomment-1283356344
-    nuxtApp.hook('page:finish', () => {
-        setTimeout(() => {
-            colorMode.value = 'light'
-
-            setTimeout(() => {
-                colorMode.value = colorMode.preference
-            }, 0)
-        }, 0)
-    })
-})