From c7fa7421e6e7db21cc58e9d1e65175bb3c66f458 Mon Sep 17 00:00:00 2001
From: MidnightCrowing <110297461+MidnightCrowing@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:33:23 +0800
Subject: [PATCH] feat(topic-page): support topic page style (#914)

---
 src/styles/adaptedStyles/index.ts             |  6 +++
 src/styles/adaptedStyles/pages/topicPage.scss | 52 +++++++++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 src/styles/adaptedStyles/pages/topicPage.scss

diff --git a/src/styles/adaptedStyles/index.ts b/src/styles/adaptedStyles/index.ts
index 5900f543..d9ad6422 100644
--- a/src/styles/adaptedStyles/index.ts
+++ b/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')
diff --git a/src/styles/adaptedStyles/pages/topicPage.scss b/src/styles/adaptedStyles/pages/topicPage.scss
new file mode 100644
index 00000000..8e47adfa
--- /dev/null
+++ b/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
+}