From 03be14e8c0cc9abea7239db8f3b8d9afb4ac0f03 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 21 Jul 2024 17:41:00 +0800
Subject: [PATCH] feat: support dark mode for login page

---
 src/contentScripts/index.ts             |  4 +-
 src/manifest.ts                         |  1 +
 src/styles/adaptedStyles/index.ts       |  8 ++-
 src/styles/adaptedStyles/loginPage.scss | 83 +++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/adaptedStyles/loginPage.scss

diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
index 8ce32997..60f29a9f 100644
--- a/src/contentScripts/index.ts
+++ b/src/contentScripts/index.ts
@@ -69,8 +69,10 @@ function isSupportedPages() {
     || /^https?:\/\/(?:www\.)?bilibili\.com\/404.*$/.test(currentUrl)
     // creative center page 創作中心頁
     || /^https?:\/\/member\.bilibili\.com\/platform.*$/.test(currentUrl)
-    // account settings page 帳號中心頁
+    // account settings page 帳號設定頁
     || /^https?:\/\/account\.bilibili\.com\/.*$/.test(currentUrl)
+    // login page
+    || /^https?:\/\/passport\.bilibili\.com\/login.*$/.test(currentUrl)
   ) {
     return true
   }
diff --git a/src/manifest.ts b/src/manifest.ts
index 3092b5c6..d705824d 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -55,6 +55,7 @@ export async function getManifest() {
           '*://member.bilibili.com/*',
           '*://account.bilibili.com/*',
           '*://www.hdslb.com/*',
+          '*://passport.bilibili.com/*',
         ],
         js: ['./dist/contentScripts/index.global.js'],
         css: ['./dist/contentScripts/style.css'],
diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index 4a0d2c16..14c3c016 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/src/styles/adaptedStyles/index.ts
@@ -118,11 +118,17 @@ async function setupStyles() {
     document.documentElement.classList.add('creativeCenterPage')
   }
 
-  // account settings page
+  // account settings page 帳戶設定頁
   else if (/^https?:\/\/account\.bilibili\.com\/.*$/.test(currentUrl)) {
     await import('./accountSettingsPage.scss')
     document.documentElement.classList.add('accountSettingsPage')
   }
+
+  // account settings page 登入頁
+  else if (/^https?:\/\/passport\.bilibili\.com\/login.*$/.test(currentUrl)) {
+    await import('./loginPage.scss')
+    document.documentElement.classList.add('loginPage')
+  }
 }
 
 setupStyles()
diff --git a/src/styles/adaptedStyles/loginPage.scss b/src/styles/adaptedStyles/loginPage.scss
new file mode 100644
index 00000000..a21b688e
--- /dev/null
+++ b/src/styles/adaptedStyles/loginPage.scss
@@ -0,0 +1,83 @@
+.bewly-design.loginPage {
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in :not()
+  :not(foobar) {
+    .clickable,
+    .area-code-select .checked {
+      color: var(--bew-theme-color);
+    }
+
+    .tabs_wp .tab_active {
+      color: var(--bew-theme-color) !important;
+    }
+
+    .btn_primary {
+      background-color: var(--bew-theme-color);
+    }
+
+    .btn_primary.disabled {
+      background-color: var(--bew-theme-color-60) !important;
+    }
+
+    .eye-btn:hover svg path {
+      fill: var(--bew-theme-color) !important;
+    }
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    #app {
+      background-color: var(--bew-bg);
+    }
+
+    .main__middle-line,
+    .tabs_wp div:nth-child(2n) {
+      background-color: var(--bew-border-color);
+    }
+
+    .login-scan__qrcode {
+      background-color: white;
+    }
+
+    .btn_other,
+    .main__right .tab__form {
+      background-color: var(--bew-fill-1);
+    }
+
+    .area-code-select .option:hover {
+      background-color: var(--bew-fill-2);
+    }
+
+    .area-code-select {
+      background-color: var(--bew-elevated-solid);
+    }
+
+    .main__right .tab__form,
+    .main__right .tab__form .form__separator-line,
+    .btn_other,
+    .tab-sms__vertical-line,
+    .area-code-select {
+      border-color: var(--bew-border-color);
+    }
+
+    .btn_other {
+      color: var(--bew-text-1);
+    }
+
+    .login-scan__txt p,
+    .third-party-login-wrapper .title,
+    .tabs_wp div {
+      color: var(--bew-text-2);
+    }
+
+    .login-protocol {
+      color: var(--bew-text-3);
+    }
+
+    .top-header {
+      filter: invert(1) hue-rotate(180deg);
+    }
+  }
+  // #endregion
+}