新增深色模式

“jiafen” · “jiafen” · commit b67d162ec62a · 2024-11-08T17:22:53.000+08:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,24 @@
 <script setup>
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
+import { useThemeStore } from '@/stores/theme'
+import { Moon, Sunny } from '@element-plus/icons-vue'
+import { useDarkMode } from '@/composables/useDarkMode'
+
+const themeStore = useThemeStore()
+const { getThemeClasses } = useDarkMode()
+
 </script>
 
 <template>
-  <RouterView />
+  <div>
+    <el-button
+      :class="[getThemeClasses('button'), 'fixed top-3 left-20 z-[60]']"
+      @click="themeStore.toggleTheme"
+      :icon="themeStore.isDark ? Sunny : Moon"
+      circle
+    />
+    <RouterView />
+  </div>
 </template>
 
 
diff --git a/src/components/AddModal.vue b/src/components/AddModal.vue
@@ -3,7 +3,7 @@
         <div v-if="loadingAddModal" class="absolute inset-0 flex justify-center items-center z-10">
             <img src="/loading.gif" alt="loading" class="w-20 h-20">
         </div>
-        <div class="bg-white rounded-lg p-6 w-2/3 lg:w-1/3 max-h-[600px] overflow-y-auto">
+        <div :class="[getThemeClasses('default'), 'rounded-lg p-6 w-2/3 lg:w-1/3 max-h-[600px] overflow-y-auto border-gray-500 border']">
             <div class="flex justify-end">
                 <el-button  @click="$emit('closeAddModal')" type="primary" native-type="button" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600 font-bold p-2">
                     x
@@ -67,6 +67,9 @@
     import { ref } from 'vue'
     import { ElMessage } from 'element-plus'
     import { View, Hide } from '@element-plus/icons-vue'
+    import { useDarkMode } from '@/composables/useDarkMode'
+
+    const { getThemeClasses } = useDarkMode()
 
     const props = defineProps({
         formColumns: {
diff --git a/src/components/EditModal.vue b/src/components/EditModal.vue
@@ -3,7 +3,7 @@
         <div v-if="loadingUpdateModal" class="absolute inset-0 flex justify-center items-center z-10">
             <img src="/loading.gif" alt="loading" class="w-20 h-20">
         </div>
-        <div class="bg-white rounded-lg p-6 w-2/3 lg:w-1/3  max-h-[600px] overflow-y-auto">
+        <div :class="[getThemeClasses('default'), 'rounded-lg p-6 w-2/3 lg:w-1/3 max-h-[600px] overflow-y-auto border-gray-500 border']">
             <div class="flex justify-end">
                 <el-button  @click="$emit('closeEditModal')" type="primary" native-type="button" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600 font-bold p-2">
                     x
@@ -57,6 +57,9 @@
 <script setup>
     import { ref } from 'vue'
     import { ElMessage } from 'element-plus'
+    import { useDarkMode } from '@/composables/useDarkMode'
+
+    const { getThemeClasses } = useDarkMode()
 
     const props = defineProps({
         formColumns: {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -1,9 +1,9 @@
 <template>
-    <el-aside class="md:flex bg-gray-800 text-white w-40 flex flex-col">
+    <el-aside :class="[getThemeClasses('sidebar'), 'md:flex text-white w-40 flex flex-col']">
         <div class="p-4 text-xl font-bold">使用者</div>
         <el-menu
           default-active="1"
-          class="bg-gray-800 text-white border-r-0 flex-1"
+          :class="[getThemeClasses('sidebar'), ' text-white border-r-0 flex-1']"
           :default-openeds="['1']"
           active-text-color="#ffd04b"
         >
@@ -18,18 +18,21 @@
 </template>
 
 <script setup>
-    defineProps({
-        sidebarList: {
-            type: Array,
-            default: () => []
-        }
-    })
-    defineEmits(['singOut', 'getTableData'])
+  import { useDarkMode } from '@/composables/useDarkMode'
+  const { getThemeClasses } = useDarkMode()
+
+  defineProps({
+      sidebarList: {
+          type: Array,
+          default: () => []
+      }
+  })
+  defineEmits(['singOut', 'getTableData'])
 </script>
 
 <style scoped>
-    .el-menu-item.is-active {
-      background-color: #4B5563;
-    }
+  .el-menu-item.is-active {
+    background-color: #4B5563;
+  }
 </style>
     
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -1,6 +1,6 @@
 <template>
     <h2 class="text-center font-bold text-3xl p-2 text-gray-500 mb-4">{{ tableTitle }}</h2>
-        <el-table border v-if="tableHeader.length !== 0" :data="tableData" class="bg-white rounded-lg shadow text-lg"  style="width: 96%" @selection-change="handleSelectionChange">
+        <el-table border v-if="tableHeader.length !== 0" :data="tableData" class="rounded-lg shadow text-lg"  style="width: 96%" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="40" />
             <el-table-column v-for="(col, index) in tableHeader" :prop="col" :label="col" :key="index"  :min-width="142" />
             <el-table-column label="edit">
diff --git a/src/composables/useDarkMode.js b/src/composables/useDarkMode.js
@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+
+export const useDarkMode = () => {
+
+  const getThemeClasses = (variant) => {
+    const themeClasses = {
+      default: 'bg-white dark:bg-black',
+      container: 'bg-gray-100 dark:bg-black',
+      card: 'bg-white dark:bg-gray-800',
+      text: 'text-gray-600 dark:text-gray-300',
+      button: 'bg-white hover:bg-gray-400 hover:text-white dark:bg-gray-600 dark:hover:bg-gray-500 dark:hover:text-white active:border-gray-500 hover:border-gray-500',
+      sidebar: 'bg-gray-800 dark:bg-black',
+      link: 'text-blue-500 dark:text-blue-400',
+    }
+    
+    return themeClasses[variant]
+  }
+
+  return {
+    getThemeClasses
+  }
+}
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,6 @@
-
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import './assets/tailwind.css'
 
 import { createApp } from 'vue'
diff --git a/src/stores/counter.js b/src/stores/counter.js
diff --git a/src/stores/theme.js b/src/stores/theme.js
@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useThemeStore = defineStore('theme', () => {
+  const isDark = ref(localStorage.getItem('theme') === 'dark')
+
+  const toggleTheme = () =>{
+    isDark.value = !isDark.value
+    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
+    updateTheme()
+  }
+
+  const updateTheme = () =>{
+    if (isDark.value) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  updateTheme()
+
+  return { isDark, toggleTheme }
+})
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -5,8 +5,12 @@
         <Sidebar :class="{ 'hidden': sidebarOpen, 'z-50 fixed inset-y-0 left-0': !sidebarOpen }" @singOut="singOut" :sidebarList="sidebarList" @getTableData="getTableData"/>
 
         <el-container class="h-[91%]">
-          <el-header class="bg-white border-b flex items-center justify-between md:justify-end" >
-            <el-icon   @click="toggleSidebar" class="text-black block md:hidden cursor-pointer" :class="{ 'fixed left-32 z-50 text-white': !sidebarOpen }">
+          <el-header :class="[getThemeClasses('default'), ' dark:border-gray-700 border-b flex items-center justify-between md:justify-end']">
+            <el-icon   @click="toggleSidebar" :class="[
+              'block md:hidden cursor-pointer',
+              getThemeClasses('text'),
+              { 'fixed left-32 z-50 text-white': !sidebarOpen }
+            ]">
               <Menu />
             </el-icon>
             <div>
@@ -42,8 +46,11 @@
   import AddModal from '@/components/AddModal.vue'
 
   import { logout, tableNames, modelData, addModelData, enumChoices, updateModel, deleteModel } from '@/composables/apis'
+  import { useDarkMode } from '@/composables/useDarkMode'
+  
 
   const router = useRouter()
+  const { getThemeClasses } = useDarkMode()
 
   const sidebarOpen = ref(true)
   const toggleSidebar = async () => {
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="h-screen flex items-center justify-center bg-gray-100">
+    <div :class="[getThemeClasses('container'), 'h-screen flex items-center justify-center']">
         <el-card class="w-1/3 max-w-md h-1/2 flex flex-col justify-around min-w-[230px]">
             <div class="text-center mb-2">
-                <p class="text-gray-600 mt-1">請登入您的帳戶</p>
+                <p :class="[getThemeClasses('text'), 'mt-1']">請登入您的帳戶</p>
             </div>
             <el-form @keyup.enter="onSubmit" :model="form" :rules="rules" ref="loginForm"  class="space-y-4">
                 <el-form-item prop="email">
@@ -30,7 +30,7 @@
                       <Hide v-else />
                   </el-icon>
                 </el-form-item>
-                <p class="text-end text-xs text-blue-500 cursor-pointer">忘記密碼？</p>
+                <p :class="[getThemeClasses('link'), 'text-end text-xs cursor-pointer']">忘記密碼？</p>
           
                 <div class="flex justify-between items-center">
                   <el-button @click="router.push('register')" type="primary" native-type="button" class="w-full bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
@@ -51,8 +51,12 @@
     import { useRouter } from 'vue-router'
     import { ElMessage } from 'element-plus'
     import { login } from '@/composables/apis'
+    import { useDarkMode } from '@/composables/useDarkMode'
     import { Lock, Box, View, Hide } from '@element-plus/icons-vue'
 
+    const { getThemeClasses } = useDarkMode()
+
+    
     const router = useRouter()
 
     const showPassword = ref(false)
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="h-screen flex items-center justify-center bg-gray-100">
+    <div :class="[getThemeClasses('container'), 'h-screen flex items-center justify-center']">
         <el-card class="w-1/3 max-w-md h-1/2 flex flex-col justify-around min-w-[230px]">
             <div class="text-center mb-2">
-                <p class="text-gray-600 mt-1">註冊</p>
+                <p :class="[getThemeClasses('text'), 'mt-1']">註冊</p>
             </div>
             <el-form :model="form" :rules="rules" ref="loginForm"  class="space-y-4 overflow-y-auto">
                 <el-form-item prop="user_name">
@@ -67,10 +67,12 @@
     import { ref } from 'vue'
     import { useRouter } from 'vue-router'
     import { ElMessage } from 'element-plus'
-    import { register, login } from '@/composables/apis'
+    import { register } from '@/composables/apis'
+    import { useDarkMode } from '@/composables/useDarkMode'
     import { Lock, User, Box, View, Hide } from '@element-plus/icons-vue'
 
     const router = useRouter()
+    const { getThemeClasses } = useDarkMode()
 
     const showPassword = ref(false)
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: 'class',
   theme: {
     extend: {},
   },
