fix: 修复暗黑模式下返回到登录页面时的部分样式错乱

仅修复了部分 Closes #3
continew-org · Feb 4, 2024 · 65e564d · 65e564d
1 parent e519d74
commit 65e564d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 21 deletions.
diff --git a/src/views/login/components/account-login.vue b/src/views/login/components/account-login.vue
@@ -169,15 +169,18 @@
     margin-top: 16px;
     .arco-input-wrapper,
     :deep(.arco-select-view-single) {
-      background-color: var(--color-bg-white);
-      border: 1px solid var(--color-border-3);
+      background-color: #fff;
+      border: 1px solid #c9cdd4;
       height: 40px;
       border-radius: 4px;
       font-size: 13px;
     }
     .arco-input-wrapper.arco-input-error {
-      background-color: var(--color-danger-light-1);
-      border-color: var(--color-danger-light-4);
+      background-color: rgb(255, 236, 232);
+      border-color: rgb(249, 137, 129);
+    }
+    .arco-input-wrapper :deep(.arco-input) {
+      color: rgb(29, 33, 41);
     }
 
     .captcha {

diff --git a/src/views/login/components/email-login.vue b/src/views/login/components/email-login.vue
@@ -165,15 +165,18 @@
     margin-top: 16px;
     .arco-input-wrapper,
     :deep(.arco-select-view-single) {
-      background-color: var(--color-bg-white);
-      border: 1px solid var(--color-border-3);
+      background-color: #fff;
+      border: 1px solid #c9cdd4;
       height: 40px;
       border-radius: 4px;
       font-size: 13px;
     }
     .arco-input-wrapper.arco-input-error {
-      background-color: var(--color-danger-light-1);
-      border-color: var(--color-danger-light-4);
+      background-color: rgb(255, 236, 232);
+      border-color: rgb(249, 137, 129);
+    }
+    .arco-input-wrapper :deep(.arco-input) {
+      color: rgb(29, 33, 41);
     }
 
     .captcha-btn {
@@ -190,7 +193,7 @@
     }
     .arco-btn-secondary:not(.arco-btn-disabled):hover {
       background-color: transparent;
-      border: 1px solid rgb(var(--primary-6));
+      border: 1px solid rgb(22, 93, 255);
     }
 
     .btn {

diff --git a/src/views/login/components/phone-login.vue b/src/views/login/components/phone-login.vue
@@ -197,15 +197,18 @@
     margin-top: 16px;
     .arco-input-wrapper,
     :deep(.arco-select-view-single) {
-      background-color: var(--color-bg-white);
-      border: 1px solid var(--color-border-3);
+      background-color: #fff;
+      border: 1px solid #c9cdd4;
       height: 40px;
       border-radius: 4px;
       font-size: 13px;
     }
     .arco-input-wrapper.arco-input-error {
-      background-color: var(--color-danger-light-1);
-      border-color: var(--color-danger-light-4);
+      background-color: rgb(255, 236, 232);
+      border-color: rgb(249, 137, 129);
+    }
+    .arco-input-wrapper :deep(.arco-input) {
+      color: rgb(29, 33, 41);
     }
 
     .captcha-btn {
@@ -220,9 +223,14 @@
       border: 1px solid #dde2e9;
       color: #41464f;
     }
+    .arco-btn-secondary.arco-btn-disabled,
+    .arco-btn-secondary[type='submit'].arco-btn-disabled {
+      color: #c9cdd4;
+      background-color: rgb(247, 248, 250);
+    }
     .arco-btn-secondary:not(.arco-btn-disabled):hover {
       background-color: transparent;
-      border: 1px solid rgb(var(--primary-6));
+      border: 1px solid rgb(22, 93, 255);
     }
 
     .btn {
@@ -240,10 +248,11 @@
 
     .arco-btn-primary.arco-btn-disabled,
     .arco-btn-primary[type='submit'].arco-btn-disabled {
-      background-color: var(--color-neutral-4);
+      color: #fff;
+      background-color: rgb(201, 205, 212);
       box-shadow:
-        0 0 0 1px var(--color-neutral-4),
-        0 2px 1px rgba(0, 0, 0, 0.15);
+        0 0 0 1px rgb(201, 205, 212),
+        0 2px 1px #00000026;
     }
   }
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -124,7 +124,7 @@
         display: inline-block;
         margin-right: 4px;
         margin-left: 4px;
-        color: var(--color-text-1);
+        color: #1d2129;
         font-size: 24px;
         vertical-align: middle;
       }
@@ -189,16 +189,23 @@
             position: relative;
           }
           :deep(.arco-tabs-tab-title:hover) {
-            color: rgb(var(--primary-6));
+            color: rgb(22, 93, 255);
           }
           :deep(.arco-tabs-tab-title:before) {
             display: none;
           }
           :deep(.arco-tabs-tab) {
             margin: 0 30px 0 6px;
+            color: rgb(78, 89, 105);
           }
         }
 
+        :deep(.arco-checkbox-label) {
+          color: #1d2129;
+        }
+        :deep(.arco-select-view-single) {
+          color: #1d2129;
+        }
         .oauth {
           margin-top: 20px;
           padding: 0 5px;
@@ -207,6 +214,10 @@
             font-size: 12px;
             font-weight: 400;
             line-height: 20px;
+            background: #fff;
+          }
+          :deep(.arco-divider-horizontal) {
+            border-bottom: 1px solid rgb(229, 230, 235);
           }
           :deep(.arco-divider) {
             margin-bottom: 25px;
@@ -259,11 +270,11 @@
             }
             .mail:hover,
             .account:hover {
-              color: rgb(var(--primary-6));
+              color: rgb(22, 93, 255);
             }
             .mail svg:hover,
             .account svg:hover {
-              color: rgb(var(--primary-6));
+              color: rgb(22, 93, 255);
             }
           }
         }