feat: dark theme support to video page & search page

* style: adjust style of certain components
* refactor: refine implementation for wallpaper mask and background effect
* feat: add functionality to the top bar logo for returning to the homepage on click

src/background/index.ts

@@ -1,5 +1,6 @@
 import type { Tabs } from 'webextension-polyfill'
 import browser from 'webextension-polyfill'
+
 // import { onMessage, sendMessage } from 'webext-bridge'
 import { resetCss } from './resetWebsiteStyle'
 import { setupAllMsgLstnrs } from './messageListeners'
@@ -57,15 +58,9 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
     || /https?:\/\/www.bilibili.com\/?$/.test(`${tab.url}`)
     || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(`${tab.url}`)
     || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(`${tab.url}`)
+    || true
     // || /https?:\/\/(www.)?bilibili.com\/video\/.*/.test(`${tab.url}`)
   ) {
-    browser.scripting.insertCSS({
-      css: resetCss,
-      target: {
-        tabId,
-      },
-    })
-
     if (changInfo.status === 'loading') {
       // browser.scripting.insertCSS({
       //   css: `
@@ -81,6 +76,13 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
       //   },
       // })
 
+      browser.scripting.insertCSS({
+        css: resetCss,
+        target: {
+          tabId,
+        },
+      })
+
       // If it not a macOS, we will inject CSS to design the scrollbar
       if (!navigator.userAgent.includes('Mac OS X')) {
         browser.scripting.insertCSS({

src/background/resetWebsiteStyle.ts

@@ -3,66 +3,41 @@ export const resetCss = `
   * this stylesheet is used to reset the styles of the bilibili default style
   */
 
-:root {
-  --bew-bg: hsl(220, 14%, 96%);
+// :root {
+//   --bew-bg: hsl(220, 14%, 96%);
+// }
 
-  // --band_blue: var(--bew-theme-color);
-  // --text1: var(--bew-text-1);
-  // --text2: var(--bew-text-2);
-  // --text3: var(--bew-text-3);
-  // --bg1: var(--bew-content-1);
-  // --bg2: var(--bew-content-1);
-  // --bg3: var(--bew-content-1);
-  // --line-light: var(--bew-fill-2);
-  // --line_regular: var(--bew-fill-3);
-  // --line_bold: var(--bew-fill-4);
-}
-
-:root.dark {
-  --bew-bg: hsl(230 12% 6%);
-}
+// :root.dark {
+//   --bew-bg: hsl(230 12% 6%);
+// }
 
 html,
 body {
   font-size: 14px !important;
   min-width: unset !important;
+  filter: none !important;
 }
 
-html, body {
-  background-color: var(--bew-bg);
-}
-a,
-a:hover {
-  color: unset;
-}
+// html, body {
+//   background-color: var(--bew-bg);
+// }
 
-/*
-// button {
-//   border: unset;
-//   background: unset;
+// /* hide the original home page */
+// .login-tip {
+//   display: none;
+// }
 
-//   &:focus,
-//   &:active {
-//     background: currentColor;
-//   }
-// }*/
-
-/* hide the original home page */
-.login-tip {
-  display: none;
-}
-
-body > #i_cecream,
-#i_cecream *,
-#app,
-.international-footer {
-  position: absolute;
-  top: 200vh;
-  visibility: hidden !important;
-  width: 0;
-  height: 0;
-  overflow: hidden !important;
-  pointer-events: none !important;
-  display: none;
-}
+// body > #i_cecream,
+// #i_cecream *,
+// /* #app, */
+// .international-footer {
+//   position: absolute;
+//   top: 200vh;
+//   visibility: hidden !important;
+//   width: 0;
+//   height: 0;
+//   overflow: hidden !important;
+//   pointer-events: none !important;
+//   display: none;
+// }
 `