Merge branch 'dev' into main

2025-04-14 13:15:29 +00:00 · 2024-03-31 04:45:58 +08:00
parent 36db58effa 91eda760dd
commit 4b4352e34d
13 changed files with 379 additions and 173 deletions
--- 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?${
--- 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)"
--- 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">
--- 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
    >
--- 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>
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -34,12 +34,22 @@ interface Props {
  rank?: number
  topRightContent?: boolean
  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>(), {
  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 +80,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 +149,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,10 +167,14 @@ 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 }"
    >
+      <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"
      >
@@ -301,10 +262,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 +305,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-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
@@ -356,71 +317,17 @@ 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-30px h-30px m="t--3px r--8px" translate-x--8px
+                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 +486,8 @@ function handelMouseLeave() {
    --at-apply: invisible pointer-events-none duration-0 transition-none;
  }
 }
+
+.more-active {
+  --at-apply: opacity-100 bg-$bew-fill-3;
+}
 </style>
--- 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,14 @@ 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 activatedVideo = ref<AppVideoItem | null>()
+const videoCardRef = ref(null)
+const dislikedVideoIds = ref<number[]>([])

 watch(() => settings.value.recommendationMode, (newValue) => {
  videoList.length = 0
@@ -45,6 +53,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 +192,42 @@ async function getAppRecommendVideos() {
  }
 }

+function handleMoreClick(e: MouseEvent, data: AppVideoItem) {
+  if (activatedVideo.value && activatedVideo.value.idx === data.idx) {
+    closeVideoOptions()
+    return
+  }
+  showVideoOptions.value = true
+  // 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
+  videoOptionsPosition.top = `${e.clientY + scrollTop}px`
+  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
+  activatedVideo.value = null
+}
+
+// function handleVideoOptionsCommand(command: string) {
+//   if (command === 'close')
+//     closeVideoOptions()
+// }
+
 function jumpToLoginPage() {
  location.href = 'https://passport.bilibili.com/login'
 }
@@ -192,6 +240,27 @@ 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
+            @click="handleMoreCommand('')"
+          >
+            {{ 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 +298,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 +314,10 @@ function jumpToLoginPage() {
          :uri="video.uri"
          show-preview
          :horizontal="gridLayout !== 'adaptive'"
+          more-btn
+          :more-btn-active="video.idx === activatedVideo?.idx"
+          :show-dislike-options="dislikedVideoIds.includes(video.idx)"
+          @more-click="(e) => handleMoreClick(e, video)"
        />
      </template>

--- a/src/styles/adaptedStyles/README-cmn_CN.md
+++ 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。
+遵循前面的这种编写风格会使得维护暗模式样式变得困难。这是因为暗色模式主要需要改变文本颜色、背景颜色或边框颜色。
+
+根据字体颜色、背景颜色和边框颜色高效地进行分组，并通过将适当的选择器放在一起统一方法，以便进行轻松维护。在必要时，只需调整相应样式中的相应选择器。
--- a/src/styles/adaptedStyles/README-cmn_TW.md
+++ 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}`。
+遵循前面的這種撰寫風格使得維持暗模式風格變得困難。這是因為深色模式主要需要更改字型色彩、背景色彩或框線色彩。
+
+根據字型色彩、背景色彩和框線色彩將顏色進行分組是非常高效的，且透過將相應的選取器放在一起以統一方法便於維護。必要時，只需調整相應樣式中的相應選取器即可。
--- a/src/styles/adaptedStyles/README-jyut.md
+++ 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}` 噉。
+學似啱啱嘅書寫風格後續會勁難維護深色模式。因為深色模式主要係改文本顏色、背景顏色或者邊框顏色呢啲嚟達到效果。
+
+將啲顏色按照字體顏色、背景顏色同埋邊框顏色噉樣分類，再將適合嘅選取器擺埋一齊，用統一嘅處理手法嚟管理，噉樣做會提高效率同埋易啲維護。之後需要執吓佢嗰陣，淨係需要就住相對應嘅樣式風格嚟調整返相對應嘅選取器就得嘞。
--- 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.
--- 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;
 }
--- 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));