diff --git a/tonecn/src/components/Common/Footer.vue b/tonecn/src/components/Common/Footer.vue
index c58f762..48253bf 100644
--- a/tonecn/src/components/Common/Footer.vue
+++ b/tonecn/src/components/Common/Footer.vue
@@ -15,9 +15,9 @@ let copyTextwithMsg = (text : string) => {
     <div class="h-[100px] w-full mx-auto max-w-[1170px] flex justify-between items-center sm:flex-row flex-col" >
         <div class="text-[12px] ml-0 sm:ml-[25px] cursor-default my-[22px] sm:my-0 mb-[10px] text-center sm:text-left">
             <a href="https://beian.miit.gov.cn/">
-                <div class="mt-[5px] cursor-pointer">备案号：渝ICP备2023009516号-1</div>
+                <div class="mt-[5px] cursor-pointer dark:text-[#ccc]">备案号：渝ICP备2023009516号-1</div>
             </a>
-            <div class="mt-[6px] sm:mt-0">Copyright ©2020-2024 TONE All Rights Reserved.</div>
+            <div class="mt-[6px] sm:mt-0 dark:text-[#ccc]">Copyright ©2020-2024 TONE All Rights Reserved.</div>
         </div>
         <div class="mr-0 sm:mr-[25px] flex sm:pb-0 pb-[20px]">
             <el-popover trigger="click" placement="top" :width="160">
diff --git a/tonecn/src/components/Common/Header.vue b/tonecn/src/components/Common/Header.vue
index 6f4abd5..d6b3c14 100644
--- a/tonecn/src/components/Common/Header.vue
+++ b/tonecn/src/components/Common/Header.vue
@@ -37,8 +37,8 @@ router.afterEach(() => {
 
 </script>
 <template>
-    <div class="z-[500] w-full fixed backdrop-blur-sm bg-white/60">
-        <div class="w-full box-content mx-auto py-[15px] sm:py-[22px] max-w-[1170px] flex justify-between items-center transition-all duration-200 border-b-[1px] border-b-[#eee]"
+    <div class="z-[500] w-full fixed backdrop-blur-sm bg-white/60 dark:bg-black/10 border-b-[#eee] border-b-[1px]">
+        <div class="w-full box-content mx-auto py-[15px] sm:py-[22px] max-w-[1170px] flex justify-between items-center transition-all duration-200"
             :class="[{ 'flex-col': showMoreOptions }]">
             <!-- left header -->
             <div class="px-[25px] flex items-center w-full justify-between sm:block">
@@ -47,12 +47,12 @@ router.afterEach(() => {
                         <div class="h-[35px] text-[25px] cursor-pointer]">🍭</div>
                     </RouterLink>
                     <RouterLink :to="{ name: 'home' }" v-else>
-                        <div class="h-[35px] leading-[35px] font-semibold tracking-[5px] text-[#333] text-nowrap">
+                        <div class="h-[35px] leading-[35px] font-semibold tracking-[5px] text-[#333] text-nowrap dark:text-white">
                             特恩(TONE)</div>
                     </RouterLink>
                 </div>
                 <!-- 更多选项按钮，宽度小于800时出现 -->
-                <div class="sm:hidden block" tabindex="0" id="header-more" ref="moreOptionsButton">
+                <div class="sm:hidden block dark:fill-[#ccc]" tabindex="0" id="header-more" ref="moreOptionsButton">
                     <svg t="1705913460674" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10513" width="20" height="20">
                         <path
@@ -66,21 +66,21 @@ router.afterEach(() => {
                 id="header-right">
                 <div class="flex justify-end items-center">
                     <RouterLink :to="{ name: 'resource' }">
-                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
-                            :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'resource' }">资源</div>
+                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
+                            :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'resource' }">资源</div>
                     </RouterLink>
                     <RouterLink :to="{ name: 'download' }">
-                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
-                            :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'download' }">下载</div>
+                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
+                            :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'download' }">下载</div>
                     </RouterLink>
                     <RouterLink :to="{ name: 'blog' }">
-                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
-                            :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'blog' || $route.name === 'blogContent' }">
+                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
+                            :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'blog' || $route.name === 'blogContent' }">
                             博客</div>
                     </RouterLink>
                     <RouterLink :to="{ name: 'dashboard' }">
-                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
-                            :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'login' || $route.name === 'dashboard' }">
+                        <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
+                            :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'login' || $route.name === 'dashboard' }">
                             控制台</div>
                     </RouterLink>
                 </div>
diff --git a/tonecn/src/components/Common/RotationVerification.vue b/tonecn/src/components/Common/RotationVerification.vue
index 20b2f82..fd27ff9 100644
--- a/tonecn/src/components/Common/RotationVerification.vue
+++ b/tonecn/src/components/Common/RotationVerification.vue
@@ -175,17 +175,17 @@ onMounted(() => {
 <template>
     <transition name="el-fade-in-linear">
         <div class="fixed w-full h-full inset-0 bg-[#00000022] z-[2000] flex justify-center items-center" @click="$emit('fail')">
-            <div class="w-[300px] h-[400px] bg-white flex flex-col items-center rounded-[15px]" onclick="event.stopPropagation()">
-                <div class="mt-[25px] text-[#888]">安全验证</div>
-                <div class="mt-[8px]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
+            <div class="w-[300px] h-[400px] bg-white dark:bg-[#222] dark:border-[1px] flex flex-col items-center rounded-[15px]" onclick="event.stopPropagation()">
+                <div class="mt-[25px] text-[#888] dark:text-white">安全验证</div>
+                <div class="mt-[8px] dark:text-[#ccc]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
                     }}
                 </div>
                 <div class="mt-[28px] w-[160px] h-[160px] rounded-full flex justify-center items-center overflow-hidden">
                     <img class="w-[226px] h-[226px] bg-gray-400 object-cover" :src="imageBase64" alt="" id="RV-image">
                 </div>
-                <div class="w-[240px] h-[40px] rounded-[20px] bg-slate-200 mt-[25px] flex items-center">
-                    <div class="w-[45px] h-[45px] leading-[45px] bg-white rounded-full shadow-md text-center cursor-pointer relative translate-x-0" id="RV-slider">
-                        <svg t="1706696449802" class="absolute left-[14px] top-[14px]" viewBox="0 0 1024 1024" fill="#666" version="1.1"
+                <div class="w-[240px] h-[40px] rounded-[20px] bg-slate-200 dark:bg-[#444] mt-[25px] flex items-center">
+                    <div class="w-[45px] h-[45px] leading-[45px] bg-white dark:bg-[#999] rounded-full shadow-md text-center cursor-pointer relative translate-x-0" id="RV-slider">
+                        <svg t="1706696449802" class="absolute left-[14px] top-[14px] dark:fill-white" viewBox="0 0 1024 1024" fill="#666" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18">
                             <path
                                 d="M567.32505 547.18536c20.970614-21.479197 20.970614-56.307424 0-77.790714L185.251168 77.115332c-20.971637-21.47715-54.975079-21.47715-75.948763 0-20.973684 21.484314-20.973684 56.30947 0 77.793784l344.188016 353.383446-344.188016 353.384469c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.971637 21.482267 54.975079 21.482267 75.948763 0l382.072858-392.280337 0.001024-0.004094zM440.60802 154.908092l344.18597 353.383446-344.18597 353.385493c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.972661 21.482267 54.975079 21.482267 75.949786 0l382.074905-392.281361c20.966521-21.478174 20.966521-56.307424 0-77.790714L516.555759 77.115332c-20.972661-21.47715-54.975079-21.47715-75.949786 0-20.971637 21.48329-20.971637 56.30947 0.002047 77.79276z"
diff --git a/tonecn/src/views/Blog.vue b/tonecn/src/views/Blog.vue
index 2f34fe2..5da80cb 100644
--- a/tonecn/src/views/Blog.vue
+++ b/tonecn/src/views/Blog.vue
@@ -22,15 +22,15 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
     <div class="flex flex-col max-w-[800px] my-[30px] mx-auto px-[20px]">
         <el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" />
         <div class="gap-[30px] flex flex-col" v-else>
-            <div class="text-center mt-[20px] mb-[300px]" v-if="loadStatus == 0">加载中，请稍后...</div>
+            <div class="text-center mt-[20px] mb-[300px] dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
             <el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" />
             <div class="mx-auto max-w-[400px] w-full flex flex-col" v-for="item of blogList">
-                <a class="text-[26px] font-semibold cursor-pointer block hover:underline" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
-                <div class="text-[#666]">{{ item.description }}</div>
+                <a class="text-[26px] font-semibold cursor-pointer block hover:underline dark:text-white" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
+                <div class="text-[#666] dark:text-[#ccc]">{{ item.description }}</div>
                 <div class="text-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} ——
                     {{ formateTimes(item.visit_count) }} 次访问</div>
             </div>
diff --git a/tonecn/src/views/BlogContent.vue b/tonecn/src/views/BlogContent.vue
index 0deb80d..484d955 100644
--- a/tonecn/src/views/BlogContent.vue
+++ b/tonecn/src/views/BlogContent.vue
@@ -72,14 +72,14 @@ onUnmounted(() => {
 })
 </script>
 <template>
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
     <div class="flex flex-col max-w-[600px] my-[50px] mx-auto px-[20px]">
-        <div class="mx-auto" v-if="loadStatus == 0">加载中，请稍后...</div>
+        <div class="mx-auto dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
         <el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" />
         <div v-if="loadStatus == 1">
             <div>
-                <h1 class="text-center text-[28px] font-semibold">{{ blogInfo.title }}</h1>
-                <p class="my-[15px] mx-auto text-[14px] text-[#888] text-center">发布于 {{
+                <h1 class="text-center text-[28px] font-semibold dark:text-white">{{ blogInfo.title }}</h1>
+                <p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center">发布于 {{
                     timestampToString(blogInfo.publish_time) }}</p>
             </div>
             <div v-html="blogContent" id="blogContentContainer"></div>
diff --git a/tonecn/src/views/Console/Login.vue b/tonecn/src/views/Console/Login.vue
index 40849ba..7c91382 100644
--- a/tonecn/src/views/Console/Login.vue
+++ b/tonecn/src/views/Console/Login.vue
@@ -59,15 +59,15 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
     <div
         class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]">
-        <h1 class="text-center text-[36px] font-medium cursor-default">登录到控制台</h1>
+        <h1 class="text-center text-[36px] font-medium cursor-default dark:text-white">登录到控制台</h1>
         <el-popover placement="bottom" :width="300" trigger="click">
             <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
                     @click="">《特恩(TONE)控制台使用协议》</strong></p>
             <template #reference>
-                <h3 class="text-center cursor-pointer font-semibold mt-[10px]">控制台是什么？</h3>
+                <h3 class="text-center cursor-pointer font-semibold mt-[10px] dark:text-[#ccc]">控制台是什么？</h3>
             </template>
         </el-popover>
         <div class="w-full flex flex-col items-center">
diff --git a/tonecn/src/views/Download.vue b/tonecn/src/views/Download.vue
index 1e243d1..caa0d70 100644
--- a/tonecn/src/views/Download.vue
+++ b/tonecn/src/views/Download.vue
@@ -21,36 +21,34 @@ onMounted(async () => {
   }
 })
 </script>
-
 <template>
   <div class="mx-auto flex flex-col items-center">
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
-    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500">
-      一些可以直接下载的工具
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
+    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">一些可以直接下载的工具
     </div>
-    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
-      <a class="text-[#222] cursor-pointer underline]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
+      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
     </div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 0">加载中，请稍后...</div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
     <div
       class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
       v-if="loadStatus == 1">
       <!-- 资源项 -->
-      <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden"
+      <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
         v-for="item of ResourceDatas" :href="item.src" target="_blank">
         <!-- 左侧图标 -->
-        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300">
+        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
           <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
         </div>
         <!-- 右侧描述 -->
         <div class="ml-[20px] flex-1 cursor-default">
-          <div class="text-[23px] font-semibold">{{ item.title }}</div>
-          <div class="text-[14px] text-[#666] mt-[5px]">{{ item.describe }}</div>
+          <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
+          <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
           <!-- 下方的标签 -->
           <div class="flex gap-[5px] mt-[10px] flex-wrap">
-            <div class="text-[10px] text-[#666] py-[1px] px-[6px] rounded-[20px]"
-              :class="[{ 'bg-[#d6eeff]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
+            <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
+              :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
               v-for="lable of item.addition.lables">{{
                 lable.text }}</div>
           </div>
diff --git a/tonecn/src/views/HomeView.vue b/tonecn/src/views/HomeView.vue
index a93b1a7..5711f3b 100644
--- a/tonecn/src/views/HomeView.vue
+++ b/tonecn/src/views/HomeView.vue
@@ -23,13 +23,14 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
+  <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
   <div
     class="flex max-w-[800px] flex-col items-center justify-center mx-auto min-h-[420px] sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)]"
     id="home-main">
     <img src="../assets/logo.jpg" alt="" class="w-[150px] rounded-full">
     <div class="name text-[34px] sm:text-[42px]" id="my-name">特恩(TONE)</div>
-    <div class="mt-[10px] sm:text-[23px] text-[16px] cursor-default text-[#888] transition-all duration-200">
+    <div
+      class="mt-[10px] sm:text-[23px] text-[16px] cursor-default text-[#888] transition-all duration-200 dark:text-[#ccc]">
       一名计算机类专业在校本科大三学生</div>
     <div class="mt-[28px] mb-[30px] flex items-center justify-center flex-wrap sm:flex-row flex-col gap-[10px]">
       <a href="https://space.bilibili.com/474156211" target="_blank">
diff --git a/tonecn/src/views/NotFound.vue b/tonecn/src/views/NotFound.vue
index 464b81a..81a1df8 100644
--- a/tonecn/src/views/NotFound.vue
+++ b/tonecn/src/views/NotFound.vue
@@ -10,7 +10,7 @@ onUnmounted(() => {
 })
 </script>
 <template>
-    <div class="bcc"></div>
+    <div class="bcc dark:bg-[#222]"></div>
     <div class="content-container">
         <el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" />
     </div>
diff --git a/tonecn/src/views/Resource.vue b/tonecn/src/views/Resource.vue
index 5a353a6..28e6d77 100644
--- a/tonecn/src/views/Resource.vue
+++ b/tonecn/src/views/Resource.vue
@@ -23,32 +23,32 @@ onMounted(async () => {
 </script>
 <template>
   <div class="mx-auto flex flex-col items-center">
-    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div>
-    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500">精心挑选并收藏的资源
+    <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
+    <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">精心挑选并收藏的资源
     </div>
-    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
-      <a class="text-[#222] cursor-pointer underline]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
+    <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
+      <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
     </div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
-    <div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 0">加载中，请稍后...</div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
+    <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
     <div
       class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
       v-if="loadStatus == 1">
       <!-- 资源项 -->
-      <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden"
+      <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
         v-for="item of ResourceDatas" :href="item.src" target="_blank">
         <!-- 左侧图标 -->
-        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300">
+        <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
           <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
         </div>
         <!-- 右侧描述 -->
         <div class="ml-[20px] flex-1 cursor-default">
-          <div class="text-[23px] font-semibold">{{ item.title }}</div>
-          <div class="text-[14px] text-[#666] mt-[5px]">{{ item.describe }}</div>
+          <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
+          <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
           <!-- 下方的标签 -->
           <div class="flex gap-[5px] mt-[10px] flex-wrap">
-            <div class="text-[10px] text-[#666] py-[1px] px-[6px] rounded-[20px]"
-              :class="[{ 'bg-[#d6eeff]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
+            <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
+              :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
               v-for="lable of item.addition.lables">{{
                 lable.text }}</div>
           </div>