From da33739ce540612fabe7020b0929e08c60972f42 Mon Sep 17 00:00:00 2001
From: Wu Chengyu <54303040+7086cmd@users.noreply.github.com>
Date: Tue, 24 Oct 2023 06:40:12 +0800
Subject: [PATCH] fix: fix the dark mode display & switch problem

---
 src/App.vue                | 10 ++++------
 src/assets/base.css        |  4 ++--
 src/views/user/UserNav.vue |  3 +--
 tailwind.config.js         |  1 +
 4 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9334ef0..dad6b89 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,7 @@ function logout() {
 </script>
 
 <template>
-  <ElContainer @contextmenu.prevent class="bg-slate-50 dark:bg-slate-700">
+  <ElContainer @contextmenu.prevent class="bg-slate-50 dark:bg-slate-800">
     <ElHeader>
       <ElRow class="pt-4 px-4">
         <ElCol :span="16">
@@ -65,19 +65,17 @@ function logout() {
     </ElHeader>
     <ElContainer style="width: 100%; height: 100%">
       <UserNav style="height: 100%" v-if="userStore.isLogin" />
-      <RouterView v-if="userStore.isLogin" class="bg-white dark:bg-black view" />
+      <RouterView v-if="userStore.isLogin" class="bg-white dark:bg-slate-900 view" />
       <RouterView v-else class="bg-slate-50 dark:bg-slate-900 view" />
     </ElContainer>
-    <ElFooter class="footer">
-      <p class="text-center">&copy; 2018-2023 镇海中学义管会技术部 MIT License</p>
+    <ElFooter class="footer bg-gray-100 text-gray-400 dark:text-gray-300 dark:bg-gray-800">
+      <p class="text-center">&copy; 2018-2023 镇海中学义管会技术部 MIT Licensed</p>
     </ElFooter>
   </ElContainer>
 </template>
 
 <style scoped>
 .footer {
-  background-color: #f5f5f5;
-  color: #666;
   font-size: 0.8rem;
   position: absolute;
   width: 100%;
diff --git a/src/assets/base.css b/src/assets/base.css
index 68cabb4..ad97db8 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -64,8 +64,8 @@
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
+  /* color: var(--color-text); */
+  /* background: var(--color-background); */
   /* background-color: #fefefe; */
   transition:
     color 0.5s,
diff --git a/src/views/user/UserNav.vue b/src/views/user/UserNav.vue
index 8f376e8..d0ffa97 100644
--- a/src/views/user/UserNav.vue
+++ b/src/views/user/UserNav.vue
@@ -157,7 +157,7 @@ function routeTo(page: string) {
 </script>
 
 <template>
-  <div class="px-2 bg-slate-50 dark:bg-slate-700 pl-3 menu">
+  <div class="px-2 bg-slate-50 dark:bg-slate-800 pl-3 menu">
     <div v-for="nav in navs" :key="nav.path">
       <div class="py-1" v-if="nav.show">
         <ElTooltip
@@ -226,7 +226,6 @@ function routeTo(page: string) {
       </ElPopover>
       <br />
       <ElButton
-        disabled
         :icon="dark ? Moon : Sunny"
         size="large"
         text
diff --git a/tailwind.config.js b/tailwind.config.js
index bd3eb14..68bf7fa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,4 +8,5 @@ export default {
     extend: {},
   },
   plugins: [],
+  darkMode: 'class'
 }