优化黑夜模式样式

Author: Silwings-git

src/App.vue

@@ -58,6 +58,7 @@ export default defineComponent({
 .dark {
     background-color: rgba(30, 31, 34);
     color: rgba(188, 190, 196);
+    scrollbar-color: rgba(188, 190, 196, 0.5) rgba(30, 31, 34, 0.5);
 }
 
 .dark .el-select-dropdown {
@@ -109,5 +110,4 @@ input[type="checkbox"]:checked::after,
     background-color: #ccc;
     border-color: #ccc;
 }
-
 </style>

src/home.vue

@@ -404,10 +404,27 @@ button:hover {
   right: 7px;
   font-size: 24px;
   cursor: pointer;
+}
+
+.close-btn.light {
   color: #333;
 }
 
-.close-btn:hover {
+.close-btn.dark {
+  position: absolute;
+  top: 0px;
+  right: 7px;
+  font-size: 24px;
+  cursor: pointer;
+  color: #a3a1a1;
+}
+
+.close-btn.light:hover {
   color: #000;
 }
+
+.close-btn.light:hover {
+  color: #f5ebeb;
+}
+
 </style>

src/settings.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="settings-container">
+    <div :class="['settings-container', theme]">
         <h2 class="setting-title">设置</h2>
 
         <div class="m-4" style="display: flex;justify-content: space-between; align-items: center;">
@@ -11,7 +11,7 @@
             <div style="display: flex;align-items: center;">
                 <p style="margin-right: 10px;">启动编组后退出</p>
                 <el-tooltip content="在启动某个编组后退出应用程序" placement="top">
-                    <Help theme="outline" size="15" fill="#333" />
+                    <Help :class="['help', theme]" theme="outline" size="15"  />
                 </el-tooltip>
             </div>
             <input type="checkbox" v-model="launchThenExit" @change="toggleLaunchThenExit" />
@@ -21,7 +21,7 @@
             <div style="display: flex;align-items: center;">
                 <p style="margin-right: 10px;">自动启动编组</p>
                 <el-tooltip content="当应用程序被设置为开机启动时, 所选择的编组将在开机启动后自动启动" placement="top">
-                    <Help theme="outline" size="15" fill="#333" />
+                    <Help :class="['help', theme]" theme="outline" size="15"  />
                 </el-tooltip>
             </div>
             <el-select append-to=".home" v-model="autoStartLauncherIds" @change="saveAutoStartLauncher"
@@ -243,4 +243,12 @@ input[type="checkbox"] {
     /* 放大复选框大小 */
     cursor: pointer;
 }
+
+.help.light {
+    color: #333;
+}
+
+.help.dark {
+    color: #a3a1a1;
+}
 </style>