feat(topic-page): support topic page style (#914)

src/styles/adaptedStyles/index.ts

@@ -104,6 +104,12 @@ async function setupStyles() {
     document.documentElement.classList.add('articlesPage')
   }
 
+  // topic page 话题页
+  else if (/https?:\/\/(?:www\.)?bilibili\.com\/v\/topic\/detail\/.*/.test(currentUrl)) {
+    await import('./pages/topicPage.scss')
+    document.documentElement.classList.add('topicPage')
+  }
+
   // 404 page 404页
   else if (/^https?:\/\/(?:www\.)?bilibili\.com\/404.*$/.test(currentUrl)) {
     await import('./pages/error404Page.scss')

src/styles/adaptedStyles/pages/topicPage.scss

@@ -0,0 +1,52 @@
+.bewly-design.topicPage {
+  // #region theme color adaption part
+  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
+  :not(foobar) {
+    .topic-nav button {
+      background-color: var(--bew-theme-color);
+    }
+
+    .bili-topic-selector__bulletin__clear {
+      background-color: var(--bew-theme-color-20);
+    }
+
+    .topic-detail__header {
+      background: linear-gradient(var(--bew-theme-color-10), transparent) !important;
+    }
+
+    .launch-user__name:hover,
+    .bili-dyn-interaction__item__desc .bili-rich-text-module:hover {
+      color: var(--bew-theme-color);
+    }
+
+    .topic-nav span:before {
+      filter: var(--bew-filter-icon-glow);
+    }
+
+    .share-popover .share-popover__qrcode canvas {
+      box-shadow: 0 0 0 2px white;
+    }
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    .topic-detail {
+      --bg3: var(--bew-bg);
+      --bg1: var(--bew-content-solid);
+    }
+
+    .active-card {
+      background-color: var(--bew-content-solid);
+    }
+
+    .bili-rich-textarea__inner {
+      background-color: transparent;
+    }
+
+    .active-card .active-content__desc {
+      color: var(--bew-color-2);
+    }
+  }
+  // #endregion
+}