feat: support dark mode for login page

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
   }

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'],

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()

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
+}