From f789745d11cc231036e10060615fc8c79a1b9cc5 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 18 Mar 2024 01:21:01 +0800
Subject: [PATCH 1/5] feat(VideoCard): add more button option to video card

---
 src/components/VideoCard/VideoCard.vue        | 152 ++++--------------
 .../views/Home/components/ForYou.vue          |  62 ++++++-
 2 files changed, 87 insertions(+), 127 deletions(-)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index ddc88ac2..f28334dd 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -34,12 +34,18 @@ interface Props {
   rank?: number
   topRightContent?: boolean
   showPreview?: boolean
+  moreBtn?: boolean
+  moreBtnActive?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   topRightContent: true,
 })
 
+const emit = defineEmits<{
+  (e: 'moreClick', event: MouseEvent): MouseEvent
+}>()
+
 const videoUrl = computed(() => {
   if (props.bvid || props.aid)
     return `https://www.bilibili.com/video/${props.bvid ?? `av${props.aid}`}`
@@ -70,8 +76,6 @@ const wValue = computed((): string => {
 const isDislike = ref<boolean>(false)
 const isInWatchLater = ref<boolean>(false)
 const isHover = ref<boolean>(false)
-// const dislikeReasonId = ref<number | null>(null)
-const showPopCtrl = ref<boolean>(false)
 const contentVisibility = ref<'auto' | 'visible'>('auto')
 const mouseEnterTimeOut = ref()
 const mouseLeaveTimeOut = ref()
@@ -141,60 +145,9 @@ function handelMouseLeave() {
   }, 300)
 }
 
-// function submitDislike(
-//   reasonID: number,
-//   goto: string,
-//   id: string,
-//   mid: number,
-//   rid: number,
-//   tagID: number,
-// ) {
-//   browser.runtime
-//     .sendMessage({
-//       contentScriptQuery: 'submitDislike',
-//       accessKey: accessKey.value,
-//       reasonID,
-//       goto,
-//       id,
-//       mid,
-//       rid,
-//       tagID,
-//     })
-//     .then((res) => {
-//       if (res.code === 0) {
-//         isDislike.value = true
-//         dislikeReasonId.value = reasonID
-//       }
-//     })
-// }
-
-// function undoDislike(
-//   reasonID: number,
-//   goto: string,
-//   id: string,
-//   mid: number,
-//   rid: number,
-//   tagID: number,
-// ) {
-//   browser.runtime
-//     .sendMessage({
-//       contentScriptQuery: 'undoDislike',
-//       accessKey,
-//       reasonID,
-//       goto,
-//       id,
-//       mid,
-//       rid,
-//       tagID,
-//     })
-//     .then((res) => {
-//       if (res.code === 0) {
-//         isDislike.value = false
-//         dislikeReasonId.value = null
-//         showPopCtrl.value = false
-//       }
-//     })
-// }
+function handleMoreBtnClick(event: MouseEvent) {
+  emit('moreClick', event)
+}
 </script>
 
 <template>
@@ -210,7 +163,7 @@ function handelMouseLeave() {
       :class="isDislike ? 'is-dislike' : ''"
       w="full" pos="absolute top-0 left-0"
       rounded="$bew-radius" duration-300 ease-in-out
-      hover:bg="$bew-fill-2" hover:ring="8 $bew-fill-2"
+      bg="hover:$bew-fill-2 active:$bew-fill-3" hover:ring="8 $bew-fill-2" active:ring="8 $bew-fill-3"
       :style="{ contentVisibility }"
     >
       <a
@@ -301,10 +254,10 @@ function handelMouseLeave() {
             duration-300
             @click.prevent="toggleWatchLater"
           >
-            <Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
+            <Tooltip v-show="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
               <mingcute:carplay-line />
             </Tooltip>
-            <Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
+            <Tooltip v-show="isInWatchLater" :content="$t('common.added')" placement="bottom" type="dark">
               <line-md:confirm />
             </Tooltip>
           </button>
@@ -344,8 +297,8 @@ function handelMouseLeave() {
               >
             </a>
           </div>
-          <div class="meta" flex="~ col" w="full" align="items-start">
-            <div flex="~" justify="between" w="full" pos="relative">
+          <div class="group/desc" flex="~ col" w="full" align="items-start">
+            <div flex="~ gap-2 justify-between items-start" w="full" pos="relative">
               <h3
                 class="keep-two-lines"
                 text="lg overflow-ellipsis $bew-text-1" h-14 overflow-hidden
@@ -356,71 +309,16 @@ function handelMouseLeave() {
                 </a>
               </h3>
 
-              <!-- <div
-                id="dislike-control-btn"
-                class="icon-btn"
-                p="t-0.15rem x-2"
-                pointer="auto"
-                display="invisible"
-                group-hover:display="visible"
-                @click.stop="showPopCtrl = !showPopCtrl"
+              <div
+                v-if="moreBtn"
+                class="opacity-0 group-hover/desc:opacity-100"
+                :class="{ 'more-active': moreBtnActive }"
+                shrink-0 w-24px h-24px grid place-items-center
+                pointer="auto" rounded="50%" duration-300
+                @click.prevent="handleMoreBtnClick"
               >
-                <tabler:dots-vertical text="lg" />
-              </div> -->
-
-              <!-- dislike control -->
-              <template v-if="showPopCtrl">
-                <!-- cover mask -->
-                <div
-                  pos="fixed top-0 left-0"
-                  w="full"
-                  h="full"
-                  z="30"
-                  @click="showPopCtrl = false"
-                />
-
-              <!-- dislike reason popup -->
-              <!-- <div
-                  pos="absolute top-9 right-0"
-                  p="2"
-                  z="30"
-                  w="180px"
-                  bg="$bew-content-1"
-                  rounded="$bew-radius"
-                  style="
-                    box-shadow: var(--bew-shadow-2);
-                    backdrop-filter: var(--bew-filter-glass-1);
-                  "
-                >
-                  <p p="2" text="$bew-text-3">
-                    {{ $t('home.not_interested_in') }}
-                  </p>
-                  <ul>
-                    <li
-                      v-for="reason in dislikeReasons"
-                      :key="reason.reason_id"
-                      p="2"
-                      m="b-1"
-                      cursor="pointer"
-                      hover:bg="$bew-fill-2"
-                      transition="all duration-300"
-                      rounded="$bew-radius"
-                      @click.stop="
-                        submitDislike(
-                          reason.reason_id,
-                          goto,
-                          param,
-                          mid,
-                          tid,
-                          tag.tag_id,
-                        )
-                      "
-                    >
-                      {{ reason.reason_name }}
-                    </li>
-                  </ul>
-                </div> -->
-              </template>
+                <mingcute:more-2-line text="lg" />
+              </div>
             </div>
             <div text="base $bew-text-2" w-fit m="t-2" flex="~ items-center wrap">
               <!-- Author Avatar -->
@@ -579,4 +477,8 @@ function handelMouseLeave() {
     --at-apply: invisible pointer-events-none duration-0 transition-none;
   }
 }
+
+.more-active {
+  --at-apply: opacity-100 bg-$bew-fill-3;
+}
 </style>
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index ca62ad7e..e7bcd64e 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { AppForYouResult, Item as AppVideoItem } from '~/models/video/appForYou'
+import { onClickOutside } from '@vueuse/core'
+import type { AppForYouResult, Item as AppVideoItem, ThreePointV2 } from '~/models/video/appForYou'
 import type { Item as VideoItem, forYouResult } from '~/models/video/forYou'
 import type { GridLayout } from '~/logic'
 import { accessKey, settings } from '~/logic'
@@ -31,7 +32,12 @@ const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
 const refreshIdx = ref<number>(1)
 const noMoreContent = ref<boolean>(false)
-const { handleReachBottom, handlePageRefresh } = useBewlyApp()
+const { handleReachBottom, handlePageRefresh, scrollbarRef } = useBewlyApp()
+const showVideoOptions = ref<boolean>(false)
+const videoOptions = ref<ThreePointV2[] | undefined>([])
+const videoOptionsPosition = reactive<{ top: string, left: string }>({ top: '0', left: '0' })
+const activatedVideoId = ref<number>(0)
+const videoCardRef = ref(null)
 
 watch(() => settings.value.recommendationMode, (newValue) => {
   videoList.length = 0
@@ -45,6 +51,10 @@ watch(() => settings.value.recommendationMode, (newValue) => {
   }
 })
 
+onClickOutside(videoCardRef, () => {
+  closeVideoOptions()
+})
+
 onMounted(async () => {
   // Delay by 0.2 seconds to obtain the `settings.value.recommendationMode` value
   // otherwise the `settings.value.recommendationMode` value will be undefined
@@ -180,6 +190,30 @@ async function getAppRecommendVideos() {
   }
 }
 
+function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
+  if (activatedVideoId.value === data.idx) {
+    closeVideoOptions()
+    return
+  }
+  showVideoOptions.value = true
+  activatedVideoId.value = data.idx
+  const osInstance = scrollbarRef.value?.osInstance()
+  const scrollTop = osInstance.elements().viewport.scrollTop || 0
+  videoOptions.value = data.three_point_v2
+  videoOptionsPosition.top = `${e.clientY + scrollTop}px`
+  videoOptionsPosition.left = `${e.clientX}px`
+}
+
+function closeVideoOptions() {
+  showVideoOptions.value = false
+  activatedVideoId.value = 0
+}
+
+// function handleVideoOptionsCommand(command: string) {
+//   if (command === 'close')
+//     closeVideoOptions()
+// }
+
 function jumpToLoginPage() {
   location.href = 'https://passport.bilibili.com/login'
 }
@@ -192,6 +226,26 @@ function jumpToLoginPage() {
     <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
     <div hidden grid="~ cols-1 gap-4" />
 
+    <!-- dislike popup -->
+    <div v-show="showVideoOptions">
+      <div
+        style="backdrop-filter: var(--bew-filter-glass-1);"
+        :style="{ transform: `translate(${videoOptionsPosition.left}, ${videoOptionsPosition.top})` }"
+        p-2 bg="$bew-elevated-1" rounded="$bew-radius" pos="absolute top-0 left-0"
+        w-150px m="t-4 l-[calc(-150px+1rem)]"
+        shadow="$bew-shadow-1" z-10
+      >
+        <ul flex="~ col gap-1">
+          <li
+            v-for="option in videoOptions" :key="option.type"
+            bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+          >
+            {{ option.title }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
     <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
       <Button type="primary" @click="jumpToLoginPage()">
         {{ $t('common.login') }}
@@ -229,6 +283,7 @@ function jumpToLoginPage() {
         <VideoCard
           v-for="video in appVideoList"
           :id="video.args.aid ?? 0"
+          ref="videoCardRef"
           :key="video.args.aid"
           :duration-str="video.cover_right_text"
           :title="`${video.title}`"
@@ -244,6 +299,9 @@ function jumpToLoginPage() {
           :uri="video.uri"
           show-preview
           :horizontal="gridLayout !== 'adaptive'"
+          more-btn
+          :more-btn-active="video.idx === activatedVideoId"
+          @more-click="(e) => handleMoreClick(e, video)"
         />
       </template>
 

From 31af6ce1ad36815d11da42585e58c7f039d868fa Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 22 Mar 2024 00:58:10 +0800
Subject: [PATCH 2/5] chore: i just wanna push some code

---
 src/background/messageListeners/video.ts      |  7 +++++
 src/components/VideoCard/VideoCard.vue        | 13 ++++++++--
 .../views/Home/components/ForYou.vue          | 26 +++++++++++++++----
 src/styles/main.scss                          |  2 +-
 4 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/background/messageListeners/video.ts b/src/background/messageListeners/video.ts
index 2d73043b..51d0d733 100644
--- a/src/background/messageListeners/video.ts
+++ b/src/background/messageListeners/video.ts
@@ -69,6 +69,13 @@ function handleMessage(message: any) {
       .then(data => data)
       .catch(error => console.error(error))
   }
+  else if (message.contentScriptQuery === 'dislikeVideo') {
+    const url = `https://api.bilibili.com/x/feed/dislike?access_key=${message.accessKey}&appkey=${message.appkey}&feedback_id=${message.feedbackId}&reason_id=${message.reasonId}`
+    return fetch(url)
+      .then(response => response.json())
+      .then(data => data)
+      .catch(error => console.error(error))
+  }
   // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%B6%85%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
   else if (message.contentScriptQuery === 'getVideoInfo') {
     const url = `https://api.bilibili.com/x/web-interface/view/detail?${
diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index f28334dd..276ada4e 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -36,6 +36,10 @@ interface Props {
   showPreview?: boolean
   moreBtn?: boolean
   moreBtnActive?: boolean
+  removed?: boolean
+  showDislikeOptions?: boolean
+  feedbackReason?: { id: number, name: string }
+  dislikeReason?: { id: number, name: string }
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -166,7 +170,11 @@ function handleMoreBtnClick(event: MouseEvent) {
       bg="hover:$bew-fill-2 active:$bew-fill-3" hover:ring="8 $bew-fill-2" active:ring="8 $bew-fill-3"
       :style="{ contentVisibility }"
     >
+      <template v-if="showDislikeOptions">
+        fdsflsd
+      </template>
       <a
+        v-else
         :style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
         :href="videoUrl" target="_blank" rel="noopener noreferrer"
       >
@@ -298,7 +306,7 @@ function handleMoreBtnClick(event: MouseEvent) {
             </a>
           </div>
           <div class="group/desc" flex="~ col" w="full" align="items-start">
-            <div flex="~ gap-2 justify-between items-start" w="full" pos="relative">
+            <div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
               <h3
                 class="keep-two-lines"
                 text="lg overflow-ellipsis $bew-text-1" h-14 overflow-hidden
@@ -313,7 +321,8 @@ function handleMoreBtnClick(event: MouseEvent) {
                 v-if="moreBtn"
                 class="opacity-0 group-hover/desc:opacity-100"
                 :class="{ 'more-active': moreBtnActive }"
-                shrink-0 w-24px h-24px grid place-items-center
+                shrink-0 w-30px h-30px m="t--3px r--8px" translate-x--8px
+                grid place-items-center
                 pointer="auto" rounded="50%" duration-300
                 @click.prevent="handleMoreBtnClick"
               >
diff --git a/src/contentScripts/views/Home/components/ForYou.vue b/src/contentScripts/views/Home/components/ForYou.vue
index e7bcd64e..312747e7 100644
--- a/src/contentScripts/views/Home/components/ForYou.vue
+++ b/src/contentScripts/views/Home/components/ForYou.vue
@@ -36,8 +36,10 @@ const { handleReachBottom, handlePageRefresh, scrollbarRef } = useBewlyApp()
 const showVideoOptions = ref<boolean>(false)
 const videoOptions = ref<ThreePointV2[] | undefined>([])
 const videoOptionsPosition = reactive<{ top: string, left: string }>({ top: '0', left: '0' })
-const activatedVideoId = ref<number>(0)
+// const activatedVideoId = ref<number>(0)
+const activatedVideo = ref<AppVideoItem | null>()
 const videoCardRef = ref(null)
+const dislikedVideoIds = ref<number[]>([])
 
 watch(() => settings.value.recommendationMode, (newValue) => {
   videoList.length = 0
@@ -191,12 +193,13 @@ async function getAppRecommendVideos() {
 }
 
 function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
-  if (activatedVideoId.value === data.idx) {
+  if (activatedVideo.value && activatedVideo.value.idx === data.idx) {
     closeVideoOptions()
     return
   }
   showVideoOptions.value = true
-  activatedVideoId.value = data.idx
+  // activatedVideo.value.idx = data.idx
+  activatedVideo.value = data
   const osInstance = scrollbarRef.value?.osInstance()
   const scrollTop = osInstance.elements().viewport.scrollTop || 0
   videoOptions.value = data.three_point_v2
@@ -204,9 +207,20 @@ function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
   videoOptionsPosition.left = `${e.clientX}px`
 }
 
+function handleMoreCommand(command: string) {
+  if (activatedVideo.value)
+    dislikedVideoIds.value.push(activatedVideo.value.idx)
+
+  // eslint-disable-next-line no-empty
+  switch (command) {}
+
+  // if (command === 'close')
+  //   closeVideoOptions()
+}
+
 function closeVideoOptions() {
   showVideoOptions.value = false
-  activatedVideoId.value = 0
+  activatedVideo.value = null
 }
 
 // function handleVideoOptionsCommand(command: string) {
@@ -239,6 +253,7 @@ function jumpToLoginPage() {
           <li
             v-for="option in videoOptions" :key="option.type"
             bg="hover:$bew-fill-2" p="x-4 y-2" rounded="$bew-radius-half" cursor-pointer
+            @click="handleMoreCommand('')"
           >
             {{ option.title }}
           </li>
@@ -300,7 +315,8 @@ function jumpToLoginPage() {
           show-preview
           :horizontal="gridLayout !== 'adaptive'"
           more-btn
-          :more-btn-active="video.idx === activatedVideoId"
+          :more-btn-active="video.idx === activatedVideo?.idx"
+          :show-dislike-options="dislikedVideoIds.includes(video.idx)"
           @more-click="(e) => handleMoreClick(e, video)"
         />
       </template>
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6b9791d7..2e4b6d78 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -30,7 +30,7 @@ html.bewly-design > ::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.bewly-design *::selection {
+::selection {
   background: var(--bew-fill-3);
   color: revert;
 }

From 14ce82430aa4dca342193ee13b6fa2e8a112c71f Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 22 Mar 2024 16:13:05 +0800
Subject: [PATCH 3/5] doc: add descriptions for Adapted Styles && add other
 language support

---
 src/styles/adaptedStyles/README-cmn_CN.md | 64 +++++++++++++++++++++++
 src/styles/adaptedStyles/README-cmn_TW.md | 64 +++++++++++++++++++++++
 src/styles/adaptedStyles/README-jyut.md   | 64 +++++++++++++++++++++++
 src/styles/adaptedStyles/README.md        | 12 ++++-
 4 files changed, 202 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/adaptedStyles/README-cmn_CN.md
 create mode 100644 src/styles/adaptedStyles/README-cmn_TW.md
 create mode 100644 src/styles/adaptedStyles/README-jyut.md

diff --git a/src/styles/adaptedStyles/README-cmn_CN.md b/src/styles/adaptedStyles/README-cmn_CN.md
new file mode 100644
index 00000000..ab3ac849
--- /dev/null
+++ b/src/styles/adaptedStyles/README-cmn_CN.md
@@ -0,0 +1,64 @@
+# Adapted Styles
+
+这里放置暗色模式的 CSS 或更改主题颜色。
+
+在 `index.ts` 中，我们将编写一些正则表达式，以匹配特定页面上使用的样式。
+
+## 样式文件编写风格
+
+``` scss
+.bewly-design.pageName {
+  // 实现对页面的特定修改，例如微调布局，将这些样式放在这里
+  .right-side-bar .catalog {
+    line-height: 3em;
+  }
+
+  ...
+
+  // #region theme color adaption part
+  // 通过在 `:not()` 中编写一个不存在的选择器来增加内部样式的优先级。
+  :not(fdjslfds) {
+    a, b, c {
+      color: var(--bew-theme-color);
+    }
+
+    d, e, f {
+      // 请注意，使用 `!important` 应该是最后万不得已的手段
+      color: var(--bew-theme-color) !important;
+    }
+
+    g, h, i {
+      background-color: var(--bew-theme-color);
+    }
+
+    j, k, l {
+      background-color: var(--bew-theme-color) !important;
+    }
+
+    ...
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    aa, bb, cc {
+      color: var(--bew-text-1);
+    }
+
+    dd, ee, ff {
+      color: var(--bew-text-1) !important;
+    }
+
+    ...
+  }
+  // #endregion
+}
+```
+
+## 为什么要使用上述的编写风格？
+
+也许你会对为什么应该遵循建议的编写风格感到困惑，所以在这里我们将解释一下。
+由于这并不是按照页面特定的初始样式编写的，并且页面已经有了原始样式，你不能简单地写入像 `xxx {border: 1px solid white; color: black}` 这样的 CSS。
+遵循前面的这种编写风格会使得维护暗模式样式变得困难。这是因为暗色模式主要需要改变文本颜色、背景颜色或边框颜色。
+
+根据字体颜色、背景颜色和边框颜色高效地进行分组，并通过将适当的选择器放在一起统一方法，以便进行轻松维护。在必要时，只需调整相应样式中的相应选择器。
diff --git a/src/styles/adaptedStyles/README-cmn_TW.md b/src/styles/adaptedStyles/README-cmn_TW.md
new file mode 100644
index 00000000..ea68e704
--- /dev/null
+++ b/src/styles/adaptedStyles/README-cmn_TW.md
@@ -0,0 +1,64 @@
+# Adapted Styles
+
+在這裡放置深色模式的 CSS 或更改主題顏色。
+
+在 `index.ts` 中，我們將編寫一些正規表達式來匹配特定頁面上使用的樣式。
+
+## 樣式表檔案撰寫風格
+
+``` scss
+.bewly-design.pageName {
+  // 在此處實施對頁面的特定修改，例如調整佈局，並將那些樣式放在這裡。
+  .right-side-bar .catalog {
+    line-height: 3em;
+  }
+
+  ...
+
+  // #region theme color adaption part
+  // 透過在 `:not()` 中寫入一個不存在的選取器來提高內部樣式的優先級。
+  :not(fdjslfds) {
+    a, b, c {
+      color: var(--bew-theme-color);
+    }
+
+    d, e, f {
+      // 請注意，使用 `!important` 應該是最後萬不得已的手段
+      color: var(--bew-theme-color) !important;
+    }
+
+    g, h, i {
+      background-color: var(--bew-theme-color);
+    }
+
+    j, k, l {
+      background-color: var(--bew-theme-color) !important;
+    }
+
+    ...
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    aa, bb, cc {
+      color: var(--bew-text-1);
+    }
+
+    dd, ee, ff {
+      color: var(--bew-text-1) !important;
+    }
+
+    ...
+  }
+  // #endregion
+}
+```
+
+## 何解使用上述之撰寫風格？
+
+您可能會對為什麼應該遵循建議的撰寫風格感到困惑，因此我們在這裡稍作解釋。
+由於這並非以該頁面特有的起始样式所撰寫，而且該頁面已經有了原始樣式，您不能僅僅像這樣寫 CSS `xxx {border: 1px solid white; color: black}`。
+遵循前面的這種撰寫風格使得維持暗模式風格變得困難。這是因為深色模式主要需要更改字型色彩、背景色彩或框線色彩。
+
+根據字型色彩、背景色彩和框線色彩將顏色進行分組是非常高效的，且透過將相應的選取器放在一起以統一方法便於維護。必要時，只需調整相應樣式中的相應選取器即可。
diff --git a/src/styles/adaptedStyles/README-jyut.md b/src/styles/adaptedStyles/README-jyut.md
new file mode 100644
index 00000000..be54a761
--- /dev/null
+++ b/src/styles/adaptedStyles/README-jyut.md
@@ -0,0 +1,64 @@
+# Adapted Styles
+
+喺呢度會擺啲深色模式同埋變更佈景色嘅 CSS
+
+喺 `index.ts`，我哋會寫一啲正則表達式令到寫嘅樣式夾返特定嘅頁面。
+
+## 樣式檔書寫風格
+
+``` scss
+.bewly-design.pageName {
+  // 喺當前嘅頁面進行特別嘅修改，就好似你係噉以執吓個佈局，將嗰啲嘢擺晒落呢度
+  .right-side-bar .catalog {
+    line-height: 3em;
+  }
+
+  ...
+
+  // #region theme color adaption part
+  // 用 `:not()` 選取選取唔存在嘅元素愛嚟提高喺呢度入邊嘅優先權
+  :not(fdjslfds) {
+    a, b, c {
+      color: var(--bew-theme-color);
+    }
+
+    d, e, f {
+      // 請注意用 `!important` 係你最後嘅選擇
+      color: var(--bew-theme-color) !important;
+    }
+
+    g, h, i {
+      background-color: var(--bew-theme-color);
+    }
+
+    j, k, l {
+      background-color: var(--bew-theme-color) !important;
+    }
+
+    ...
+  }
+  // #endregion
+
+  // #region dark mode adaption part
+  &.dark {
+    aa, bb, cc {
+      color: var(--bew-text-1);
+    }
+
+    dd, ee, ff {
+      color: var(--bew-text-1) !important;
+    }
+
+    ...
+  }
+  // #endregion
+}
+```
+
+## 點解要用上高嘅書寫風格？
+
+你可能唔係幾明點解要跟住建議嘅書寫風格，所以而家我哋慢慢解釋。
+事關你唔係用呢個網頁最初嘅樣式嚟寫，而呢個網頁不溜就已經有咗自己嘅樣式，所以你唔可以直接噉寫 CSS 就好似 `xxx {border: 1px solid white; color: black}` 噉。
+學似啱啱嘅書寫風格後續會勁難維護深色模式。因為深色模式主要係改文本顏色、背景顏色或者邊框顏色呢啲嚟達到效果。
+
+將啲顏色按照字體顏色、背景顏色同埋邊框顏色噉樣分類，再將適合嘅選取器擺埋一齊，用統一嘅處理手法嚟管理，噉樣做會提高效率同埋易啲維護。之後需要執吓佢嗰陣，淨係需要就住相對應嘅樣式風格嚟調整返相對應嘅選取器就得嘞。
diff --git a/src/styles/adaptedStyles/README.md b/src/styles/adaptedStyles/README.md
index 5ae357e0..66f3c03b 100644
--- a/src/styles/adaptedStyles/README.md
+++ b/src/styles/adaptedStyles/README.md
@@ -2,7 +2,7 @@
 
 Here, place the CSS for dark mode or change the theme color.
 
-In `index.ts`, we will write some regex rules to match the style used on specific page.
+In `index.ts`, we will write some regex rules to match the style used on a specific page.
 
 ## Style File Writing Style
 
@@ -16,7 +16,7 @@ In `index.ts`, we will write some regex rules to match the style used on specifi
   ...
 
   // #region theme color adaption part
-  // Increase the priority of the style inside by writing a non-existent selector in :not()
+  // Increase the priority of the style inside by writing a non-existent selector in `:not()`
   :not(fdjslfds) {
     a, b, c {
       color: var(--bew-theme-color);
@@ -54,3 +54,11 @@ In `index.ts`, we will write some regex rules to match the style used on specifi
   // #endregion
 }
 ```
+
+## Why use the above writing style?
+
+You might be confused about why you should follow the suggested writing style, so here we will explain a bit.
+Since this isn't written in a pure style specific to the page, and the page already has an original style, you can't simply write CSS like `xxx {border: 1px solid white; color: black}`.
+Following this writing style makes it hard to maintain the dark mode style. This is because dark mode primarily requires changes to the text color, background color, or border color.
+
+It's efficient to group colors according to font color, background color, and border color, and to unify the approach by placing the appropriate selectors together for easy maintenance. When necessary, just adjust the corresponding selectors in the corresponding styles.

From ae9c0e1f871e0f1614431c0258897dbdf3907f0a Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 25 Mar 2024 23:43:42 +0800
Subject: [PATCH 4/5] style: adjust styles

---
 src/components/Dock/Dock.vue                  |  2 +-
 src/components/Settings/Settings.vue          | 74 +++++++++++--------
 .../components/ChildSettingsDialog.vue        |  2 +-
 .../Settings/components/SettingsItemGroup.vue |  2 +-
 src/styles/variables.scss                     | 20 ++---
 5 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 1af16cc9..8116f403 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -181,7 +181,7 @@ function toggleDockHide(hide: boolean) {
       }"
       style="backdrop-filter: var(--bew-filter-glass-1);"
       absolute duration-300 ease-in-out
-      p-2 m-2 bg="$bew-content-2" flex="~ col gap-2 shrink-0"
+      p-2 m-2 bg="$bew-content-2 dark:$bew-elevated-1" flex="~ col gap-2 shrink-0"
       rounded="60px" border="1px $bew-border-color"
       shadow="$bew-shadow-2"
       @mouseenter="toggleDockHide(false)"
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index e706a537..487d7770 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -128,7 +128,8 @@ function setCurrentTitle() {
             --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
             backdrop-filter: var(--bew-filter-glass-2);
           "
-          flex="~ gap-2 col" rounded="30px hover:25px" bg="$bew-elevated-1 hover:$bew-elevated-2" p-2 shadow
+          flex="~ gap-2 col" rounded="30px hover:25px" p-2 shadow
+          bg="$bew-content-2 hover:$bew-elevated-1 dark:$bew-elevated-1 dark-hover:$bew-elevated-2"
           scale="group-hover:105" duration-300 overflow-hidden antialiased
           border="1 $bew-border-color"
         >
@@ -165,39 +166,52 @@ function setCurrentTitle() {
           --un-shadow: var(--bew-shadow-4), var(--bew-shadow-edge-glow-2);
           backdrop-filter: var(--bew-filter-glass-2);
         "
-        relative overflow="x-hidde" w-full h-full bg="$bew-elevated-1"
-        shadow rounded="$bew-radius"
+        relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated-1"
+        shadow rounded="$bew-radius" border="1 $bew-border-color"
       >
-        <OverlayScrollbarsComponent ref="scrollbarRef" element="div" h-inherit defer>
-          <header
-            flex justify-between items-center w-full h-80px
-            pos="sticky top-0 left-0" p="x-11"
-            z-1 rounded="t-$bew-radius"
+        <header
+          flex justify-between items-center w-full h-80px
+          pos="fixed top-0 left-0" p="x-11"
+          z-1 rounded="t-$bew-radius"
+          style="
+            text-shadow: 0 0 10px var(--bew-elevated-solid-1), 0 0 15px var(--bew-elevated-solid-1)
+          "
+        >
+          <!-- Mask -->
+          <div
+            pos="absolute top-0 left-0" w-inherit h-inherit pointer-events-none
             style="
-              text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
+              mask-image: linear-gradient(to bottom,  black 0, transparent 100%);
+              -webkit-mask-image: linear-gradient(to bottom, black 0, transparent 100%);
+              backdrop-filter: blur(6px);
             "
+            z--1 rounded-inherit
+          />
+          <div text="3xl" fw-bold>
+            {{ title }}
+          </div>
+          <div
+            style="backdrop-filter: var(--bew-filter-glass-1)"
+            text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
+            p="1" rounded-8 cursor="pointer"
+            hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
+            @click="handleClose"
+          >
+            <ic-baseline-clear />
+          </div>
+        </header>
+        <OverlayScrollbarsComponent
+          ref="scrollbarRef"
+          style="
+            mask-image: linear-gradient(to bottom, transparent 0%, black 80px 30%);
+            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 80px 30%);
+          "
+          element="div" defer
+          h-inherit
+        >
+          <main
+            pos="absolute top-80px left-0" w-full min-h="[calc(100%-80px)]" p="x-12 b-8"
           >
-            <!-- Mask -->
-            <div
-              pos="absolute top-0 left-0" w-inherit h-inherit pointer-events-none
-              style="mask-image: linear-gradient(to bottom,  black 70%, transparent);"
-              z--1 rounded-inherit
-            />
-            <div text="3xl" fw-bold>
-              {{ title }}
-            </div>
-            <div
-              style="backdrop-filter: var(--bew-filter-glass-1)"
-              text-2xl leading-0 bg="$bew-fill-1 hover:$bew-theme-color-30" w="32px" h="32px"
-              p="1" rounded-8 cursor="pointer"
-              hover:ring="2 $bew-theme-color" hover:text="$bew-theme-color" duration-300
-              @click="handleClose"
-            >
-              <ic-baseline-clear />
-            </div>
-          </header>
-
-          <main pos="absolute top-80px left-0" w-full min-h="[calc(100%-80px)]" p="x-12 b-8">
             <!-- <div h-80px mt--8 /> -->
 
             <Transition name="page-fade">
diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index c2ea6d19..898e4429 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -24,7 +24,7 @@ function handleClose() {
         --un-shadow: var(--bew-shadow-3) var(--bew-shadow-edge-glow-2);
         backdrop-filter: var(--bew-filter-glass-2);
       "
-      pos="fixed top-1/2 left-1/2" bg="$bew-elevated-1" rounded="$bew-radius"
+      pos="fixed top-1/2 left-1/2" bg="$bew-content-2 dark:$bew-elevated-1" rounded="$bew-radius"
       transform="translate--1/2" z-2 shadow overflow="x-hidden y-overlay" w="$b-dialog-width"
       h="$b-dialog-height" antialiased
     >
diff --git a/src/components/Settings/components/SettingsItemGroup.vue b/src/components/Settings/components/SettingsItemGroup.vue
index eda41960..a381d57b 100644
--- a/src/components/Settings/components/SettingsItemGroup.vue
+++ b/src/components/Settings/components/SettingsItemGroup.vue
@@ -16,7 +16,7 @@ defineProps<{
 
     <main
       mt-2 px-4 mx--4 rounded="$bew-radius"
-      bg="$bew-fill-1"
+      bg="$bew-content-1 dark:$bew-fill-1"
     >
       <slot />
     </main>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 425d6ad3..925dc8fa 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -96,10 +96,10 @@
   // #endregion
 
   --bew-bg: hsl(0 0% 100%);
-  --bew-homepage-bg: hsl(220 14% 96%);
+  --bew-homepage-bg: hsl(240 31% 96%);
   --bew-homepage-bg-mask-opacity: 0;
   --bew-homepage-bg-mask: hsl(
-    220 14% 96% / var(--bew-homepage-bg-mask-opacity)
+    240 31% 96% / var(--bew-homepage-bg-mask-opacity)
   );
 
   --bew-content-opacity: 0.8;
@@ -107,13 +107,13 @@
   // #region content colors, used to buttons, cards, popover and so on
   --bew-content-1: hsl(0 0% 100% / var(--bew-content-opacity));
   --bew-content-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
-  --bew-content-2: hsl(0 0% 93% / var(--bew-content-opacity));
-  --bew-content-2-hover: hsl(0 0% 78% / var(--bew-content-opacity));
+  --bew-content-2: hsl(240 31% 95% / var(--bew-content-opacity));
+  --bew-content-2-hover: hsl(240 31% 80% / var(--bew-content-opacity));
 
   --bew-content-solid-1: hsl(0 0% 100%);
   --bew-content-solid-1-hover: hsl(0 0% 85%);
-  --bew-content-solid-2: hsl(0 0% 93%);
-  --bew-content-solid-2-hover: hsl(0 0% 78%);
+  --bew-content-solid-2: hsl(240 31% 95%);
+  --bew-content-solid-2-hover: hsl(240 31% 85%);
 
   --bew-elevated-1: hsl(0 0% 100% / var(--bew-content-opacity));
   --bew-elevated-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
@@ -171,13 +171,13 @@
 
   --bew-content-1: hsl(230 12% 12% / var(--bew-content-opacity));
   --bew-content-1-hover: hsl(230 12% 28% / var(--bew-content-opacity));
-  --bew-content-2: hsl(230 12% 20% / var(--bew-content-opacity));
-  --bew-content-2-hover: hsl(230 12% 36% / var(--bew-content-opacity));
+  --bew-content-2: hsl(240 14% 15% / var(--bew-content-opacity));
+  --bew-content-2-hover: hsl(240 14% 31% / var(--bew-content-opacity));
 
   --bew-content-solid-1: hsl(230 12% 12%);
   --bew-content-solid-1-hover: hsl(230 12% 28%);
-  --bew-content-solid-2: hsl(230 12% 20%);
-  --bew-content-solid-2-hover: hsl(230 12% 36%);
+  --bew-content-solid-2: hsl(240 14% 15%);
+  --bew-content-solid-2-hover: hsl(240 14% 31%);
 
   --bew-elevated-1: hsl(230 12% 15% / var(--bew-content-opacity));
   --bew-elevated-1-hover: hsl(230 12% 31% / var(--bew-content-opacity));

From 47e99304d06e92306aef8adecd9b799418e1562f Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Tue, 26 Mar 2024 01:16:01 +0800
Subject: [PATCH 5/5] fix: `#` suffix bilibili home uri

---
 src/utils/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/main.ts b/src/utils/main.ts
index ca349a44..968e8b18 100644
--- a/src/utils/main.ts
+++ b/src/utils/main.ts
@@ -115,7 +115,7 @@ export function delay(ms: number) {
  */
 export function isHomePage(): boolean {
   if (
-    /https?:\/\/(www\.)bilibili.com\/?$/.test(location.href)
+    /https?:\/\/(www\.)bilibili.com\/?#?$/.test(location.href)
     || /https?:\/\/(www\.)bilibili.com\/index\.html$/.test(location.href)
     || /https?:\/\/(www\.)?bilibili.com\/\?spm_id_from=(.)*/.test(location.href)
   )