fix: fix the dark mode display & switch problem

zvms · Oct 23, 2023 · da33739 · da33739
1 parent 18d0dfe
commit da33739
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -8,4 +8,5 @@ export default {
     extend: {},
   },
   plugins: [],
+  darkMode: 'class'
 }