优化：暗黑模式样式调整

Author: modstart

changelog.md

@@ -1,6 +1,6 @@
 ## v0.2.0
 
-- 新增：暗黑模式
+- 新增：暗黑模式支持，支持自动切换系统主题
 - 修复：命令行中带有空格的参数无法执行问题
 - 修复：最小化最大化不能点击问题
 

electron/mapi/app/main.ts

@@ -176,7 +176,7 @@ const shouldDarkMode = async () => {
 
 const defaultDarkModeBackgroundColor = async () => {
     if (await shouldDarkMode()) {
-        return '#1A202C'
+        return '#17171A'
     }
     return '#FFFFFF'
 }

electron/mapi/ui/render.ts

@@ -68,7 +68,7 @@ const initLoaders = () => {
   z-index: 10000;
 }
 [data-theme="dark"] .app-loading-wrap {
-    background: #1A202C;
+    background: #17171A;
 }
 [data-theme="dark"] .${className} > div {
     --_g: no-repeat radial-gradient(circle closest-side,#2D3748 90%,#2D374800);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "linkandroid",
-    "version": "0.2.0-beta",
+    "version": "0.2.0",
     "main": "dist-electron/main/index.js",
     "description": "Link android to PC easily",
     "author": "ModStartLib",

src/components/PageNav.vue

@@ -35,7 +35,7 @@ const doUser = async () => {
 </script>
 
 <template>
-    <div class="flex flex-col h-full border-r border-gray-200 dark:border-gray-700">
+    <div class="flex flex-col h-full border-r border-gray-200 dark:border-gray-800">
         <div class="py-4 px-3 " :class="setting.basic.userEnable?'cursor-pointer':''" @click="doUser">
             <a-tooltip v-if="setting.basic.userEnable"
                        :content="userTip as string" position="right">

src/layouts/Main.vue

@@ -18,7 +18,7 @@ onBeforeMount(() => {
 </script>
 <template>
     <div class="window-container">
-        <div class="window-header flex h-10 items-center border-b border-solid border-gray-200 dark:border-gray-600">
+        <div class="window-header flex h-10 items-center border-b border-solid border-gray-200 dark:border-gray-800">
             <div class="window-header-title flex-grow flex items-center">
                 <div class="pl-2 py-2">
                     <img src="/logo.svg" class="w-4 t-4"/>

src/pages/Device.vue

@@ -159,7 +159,7 @@ const doHelp = () => {
                 <div v-for="(r,rIndex) in deviceRecords" :key="rIndex"
                      class="w-full lg:w-1/2 2xl:w-1/3 p-3">
                     <div
-                        class="hover:shadow-lg bg-white dark:bg-gray-800 shadow border border-solid h-64 border-gray-100 dark:border-gray-700 rounded-lg flex flex-col">
+                        class="hover:shadow-lg bg-white dark:bg-gray-800 shadow border border-solid h-64 border-gray-100 dark:border-gray-800 rounded-lg flex flex-col">
                         <div class="flex overflow-hidden flex-shrink-0 items-center h-12 px-4 py-2">
                             <div class="overflow-hidden">
                                 <div class="font-bold truncate cursor-pointer">

src/pages/Setting.vue

@@ -40,7 +40,7 @@ onBeforeUnmount(() => {
 <template>
     <div class="flex select-none">
         <div ref="tabContainer"
-             class="p-8 w-56 flex-shrink-0 border-r border-solid border-gray-100 dark:border-gray-700">
+             class="p-8 w-56 flex-shrink-0 border-r border-solid border-gray-100 dark:border-gray-800">
             <div data-section="basic" class="p-2 rounded-lg mr-2 mb-4 cursor-pointer menu-active">
                 <div class="text-base">
                     <icon-settings/>
@@ -70,14 +70,14 @@ onBeforeUnmount(() => {
                         <SettingBasic/>
                     </div>
                 </div>
-                <div class="border-b border-solid border-gray-200 dark:border-gray-700 my-6"></div>
+                <div class="border-b border-solid border-gray-200 dark:border-gray-800 my-6"></div>
                 <div data-section="env" class="scroll-mt-4">
                     <div class="text-base font-bold mb-4">{{ t('环境设置') }}</div>
                     <div>
                         <SettingEnv/>
                     </div>
                 </div>
-                <div class="border-b border-solid border-gray-200 dark:border-gray-700 my-6"></div>
+                <div class="border-b border-solid border-gray-200 dark:border-gray-800 my-6"></div>
                 <div data-section="about" class="scroll-mt-4">
                     <div class="text-base font-bold mb-4">
                         {{ t('关于软件') }}

src/style.less

@@ -53,10 +53,10 @@ body[data-theme="dark"] {
     --primary-9: 251, 181, 196;
     --primary-10: 255, 232, 237;
 
-    --color-background: #1A202C;
+    --color-background: #17171A;
     --color-text: #CCCCCC;
     --color-text-page-nav: #CCCCCC;
-    --color-bg-page-nav: #1A202C;
+    --color-bg-page-nav: #17171A;
     --color-bg-page-nav-active: #2d3443;
 }