feat: enhance dark mode support across various components

- Updated styles in AccountSetting, SystemConfig, Version, and other components to improve dark mode visibility.
- Added dark mode classes for text and background colors to ensure better contrast and readability.
- Modified CSS variables in dark.css for consistent theming.
- Improved accessibility by ensuring all text elements are legible in dark mode.

src/pages/home/TaskCenter.vue

@@ -6,20 +6,20 @@
 
         <div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
             <div v-for="item in taskList" :key="item.id" class="flex gap-3 items-start p-3.5
-                  rounded-[10px] border border-[#dfeaf6] bg-white cursor-pointer hover:bg-[#F5F7FA]"
+                  rounded-[10px] border border-[#dfeaf6] dark:border-[#2a2a2d] bg-white dark:bg-[#1f1f22] cursor-pointer hover:bg-[#F5F7FA] dark:hover:bg-[#2a2a2d]"
                 @click="handleTaskItem(item)">
-                <div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
-                    border border-dashed border-[#9fc0e8]
+                <div class="w-11 h-11 bg-[#EFF6FF] dark:bg-[#222225] rounded-lg
+                    border border-dashed border-[#9fc0e8] dark:border-gray-700
                     flex items-center justify-center
                     text-[#3b82f6] text-[23px]">
                     {{ item.icon }}
                 </div>
 
                 <div>
-                    <div class="font-semibold">
+                    <div class="font-semibold dark:text-gray-100">
                         {{ item.title }}
                     </div>
-                    <div class="text-[#9aa5b1] text-[13px] mt-1.5">
+                    <div class="text-[#9aa5b1] dark:text-gray-400 text-[13px] mt-1.5">
                         {{ item.desc }}
                     </div>
                 </div>