Optimize: dark mode

Author: LazyCreeper

src/app/views/Install/index.vue

@@ -4,6 +4,11 @@
 
 <template>
   <div class="contanier">
+    <el-skeleton :rows="5" animated />
+    <br />
+    <el-skeleton :rows="8" animated />
+    <br />
+    <el-skeleton :rows="4" animated />
     <div class="bg"></div>
 
     <!-- <div class="panel-wrapper" v-if="step == -1">
@@ -196,8 +201,8 @@ export default {
 <style scoped>
 .bg {
   z-index: 998;
-  background-color: rgb(228, 228, 228);
   position: fixed;
+  backdrop-filter: blur(10px) brightness(0.5);
   top: 0px;
   left: 0px;
   right: 0px;
@@ -223,7 +228,6 @@ export default {
 }
 
 .panel {
-  background-color: white;
   min-height: 340px;
   width: 520px;
   transition: all 0.4s;

src/app/views/quickstart/index.vue

@@ -325,6 +325,7 @@ export default {
   width: 100%;
 }
 .task-container {
+  color: #767676;
   text-align: left;
   margin-top: 30px;
   width: 300px;

src/assets/css/dark-mode.scss

@@ -184,13 +184,18 @@
     background-color: #060606;
   }
 
-  .el-switch__label {
+  .el-switch__label,.quick-title {
     color: #eeeeee
   }
 
   .el-input-number__decrease,.el-input-number__increase{
     background-color: rgb(42, 42, 42)
   }
+
+  .el-dropdown-link:hover {
+    background-color: unset!important;
+    backdrop-filter: brightness(0.8)!important;
+  }
 }
 
 .dark {

src/components/SelectBlock.vue

@@ -35,7 +35,7 @@ export default {
 
   .box-card:hover {
     transform: scale(1.04);
-    background-color: rgb(235, 235, 235);
+    filter: brightness(0.89);
     border: 1px solid rgb(12, 88, 174);
   }