diff --git a/src/components/VideoCard-Perf.vue.bak b/src/components/VideoCard-Perf.vue.bak
new file mode 100644
index 00000000..8dc62f5f
--- /dev/null
+++ b/src/components/VideoCard-Perf.vue.bak
@@ -0,0 +1,367 @@
+<script lang="ts" setup>
+import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
+import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
+
+const props = defineProps<{
+  id: number
+  duration?: number
+  title: string
+  cover: string
+  author?: string
+  authorFace?: string
+  mid?: number
+  view?: number
+  danmaku?: number
+  publishedTimestamp?: number
+  bvid?: string
+  aid?: number
+  isFollowed?: boolean
+}>()
+
+const videoUrl = computed(() => {
+  return `https://www.bilibili.com/video/${props.bvid ?? `av${props.aid}`}`
+})
+
+const isDislike = ref<boolean>(false)
+const isInWatchLater = ref<boolean>(false)
+// const dislikeReasonId = ref<number | null>(null)
+const showPopCtrl = ref<boolean>(false)
+
+function gotoChannel(mid: number) {
+  window.open(`//space.bilibili.com/${mid}`)
+}
+
+function toggleWatchLater() {
+  if (!isInWatchLater.value) {
+    browser.runtime.sendMessage({
+      contentScriptQuery: 'saveToWatchLater',
+      aid: props.id,
+      csrf: getCSRF(),
+    })
+      .then((res) => {
+        if (res.code === 0)
+          isInWatchLater.value = true
+      })
+  }
+  else {
+    browser.runtime.sendMessage({
+      contentScriptQuery: 'removeFromWatchLater',
+      aid: props.id,
+      csrf: getCSRF(),
+    })
+      .then((res) => {
+        if (res.code === 0)
+          isInWatchLater.value = false
+      })
+  }
+}
+
+// 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
+//       }
+//     })
+// }
+</script>
+
+<template>
+  <div relative>
+    <div
+      class="video-card group"
+      :class="isDislike ? 'is-dislike' : ''"
+      m="b-8" pos="absolute top-0 left-0" w-full h-full
+      rounded="$bew-radius" content-visibility-auto
+    >
+      <!-- Undo control -->
+      <div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
+        <div
+          id="dislike-control"
+          pos="absolute top-0 left-0"
+          w="full"
+          h="auto"
+          flex="~ col"
+          justify="center"
+          align="content-center"
+          border="solid $bew-fill-1"
+          text="$bew-text-3 sm center"
+          rounded="$bew-radius"
+          class="aspect-video"
+        >
+          {{ $t('home.video_removed') }}
+          <!-- <button
+            text="$bew-theme-color base"
+            font="bold"
+            m="t-4"
+            @click="
+              undoDislike(
+                dislikeReasonId ? dislikeReasonId : 0,
+                goto,
+                param,
+                mid,
+                tid,
+                tag.tag_id,
+              )
+            "
+          >
+            {{ $t('common.undo') }}
+          </button> -->
+        </div>
+      </div>
+
+      <div>
+        <div
+          w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
+          group-hover:transform="translate--4px"
+          style="--un-shadow:
+            0 0 0 4px var(--bew-theme-color),
+            8px 8px 0 2px var(--bew-theme-color-60),
+            14px 14px 0 2px var(--bew-theme-color-40)"
+          transition="all ease-in-out 300" group-hover:z-2
+          @click.stop="openLinkToNewTab(videoUrl)"
+        >
+          <!-- Video duration -->
+          <div
+            v-if="duration"
+            pos="absolute bottom-0 right-0"
+            z="2"
+            p="x-2 y-1"
+            m="1"
+            rounded="$bew-radius"
+            text="!white xs"
+            bg="black opacity-60"
+          >
+            {{ calcCurrentTime(duration) }}
+          </div>
+
+          <div pos="absolute top-0 left-0" z-2>
+            <slot name="coverTopLeft" />
+          </div>
+
+          <button
+            pos="absolute top-0 right-0" z="2"
+            p="x-2 y-1" m="1"
+            rounded="$bew-radius"
+            text="!white xl"
+            bg="black opacity-60" opacity-0 group-hover:opacity-100
+            transform="scale-70 group-hover:scale-100"
+            duration-300
+            @click.stop="toggleWatchLater"
+          >
+            <Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
+              <tabler:playlist-add />
+            </Tooltip>
+            <Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
+              <tabler:check />
+            </Tooltip>
+          </button>
+
+          <!-- Video cover -->
+          <img
+            :src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
+            loading="lazy"
+            w="full" max-w-full align-middle aspect-video
+            bg="cover center"
+            rounded="$bew-radius"
+          >
+        </div>
+
+        <div flex="~" m="t-4">
+          <div class="flex">
+            <a
+              v-if="authorFace"
+              m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
+              bg="$bew-fill-4" cursor="pointer"
+              style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
+              :href="`//space.bilibili.com/${mid}`" target="_blank"
+              @click.stop=""
+            >
+              <img
+                :src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
+                width="40"
+                height="40"
+                loading="lazy"
+              >
+            </a>
+          </div>
+          <div class="meta" flex="~ col" w="full" align="items-start">
+            <div flex="~" justify="between" w="full" pos="relative">
+              <h3
+                class="keep-two-lines"
+                text="lg overflow-ellipsis $bew-text-1" h-3em
+                cursor="pointer"
+              >
+                <a :href="videoUrl" target="_blank" :title="title">
+                  {{ title }}</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"
+              >
+                <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);
+                  "
+                >
+                  <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>
+            </div>
+            <div
+              v-if="author"
+              class="channel-name"
+              text="base $bew-text-2"
+              m="t-2" cursor-pointer
+              @click="gotoChannel(mid ?? 0)"
+            >
+              {{ author }}
+            </div>
+            <div class="video-info" text="base $bew-text-2">
+              <span v-if="view">{{
+                $t('common.view', { count: numFormatter(view) }, view)
+              }}</span>
+              <template v-if="danmaku">
+                <span text-xs font-light mx-1>•</span>
+                <span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
+              </template>
+              <br>
+              <span v-if="publishedTimestamp" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- skeleton -->
+    <div
+      mb-10 pointer-events-none select-none invisible
+    >
+      <div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
+      <div flex mt-4>
+        <div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
+        <div w-full>
+          <div grid gap-2>
+            <div w-full h-5 bg="$bew-fill-3" />
+            <div w="3/4" h-5 bg="$bew-fill-3" />
+          </div>
+          <div grid gap-2 mt-4>
+            <div w="50%" h-4 bg="$bew-fill-2" />
+            <div w="80%" h-4 bg="$bew-fill-2" />
+          </div>
+          <div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+            hello world
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.video-card.is-dislike {
+  > *:not(#dislike-control) {
+    --at-apply: invisible pointer-events-none duration-0 transition-none;
+  }
+}
+</style>
diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index f65d7479..c5d789c4 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -117,7 +117,7 @@ function toggleWatchLater() {
     class="video-card group"
     :class="isDislike ? 'is-dislike' : ''"
     m="b-8"
-    rounded="“$bew-radius"
+    rounded="$bew-radius"
   >
     <!-- Undo control -->
     <div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
@@ -136,22 +136,22 @@ function toggleWatchLater() {
       >
         {{ $t('home.video_removed') }}
         <!-- <button
-          text="$bew-theme-color base"
-          font="bold"
-          m="t-4"
-          @click="
-            undoDislike(
-              dislikeReasonId ? dislikeReasonId : 0,
-              goto,
-              param,
-              mid,
-              tid,
-              tag.tag_id,
-            )
-          "
-        >
-          {{ $t('common.undo') }}
-        </button> -->
+            text="$bew-theme-color base"
+            font="bold"
+            m="t-4"
+            @click="
+              undoDislike(
+                dislikeReasonId ? dislikeReasonId : 0,
+                goto,
+                param,
+                mid,
+                tid,
+                tag.tag_id,
+              )
+            "
+          >
+            {{ $t('common.undo') }}
+          </button> -->
       </div>
     </div>
 
@@ -160,9 +160,9 @@ function toggleWatchLater() {
         w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
         group-hover:transform="translate--4px"
         style="--un-shadow:
-          0 0 0 4px var(--bew-theme-color),
-          8px 8px 0 2px var(--bew-theme-color-60),
-          14px 14px 0 2px var(--bew-theme-color-40)"
+            0 0 0 4px var(--bew-theme-color),
+            8px 8px 0 2px var(--bew-theme-color-60),
+            14px 14px 0 2px var(--bew-theme-color-40)"
         transition="all ease-in-out 300" group-hover:z-2
         @click.stop="openLinkToNewTab(videoUrl)"
       >
@@ -208,7 +208,7 @@ function toggleWatchLater() {
           loading="lazy"
           w="full" max-w-full align-middle aspect-video
           bg="cover center"
-          rounded="$bew-radius" content-visibility-auto
+          rounded="$bew-radius"
         >
       </div>
 
@@ -226,7 +226,7 @@ function toggleWatchLater() {
               :src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
               width="40"
               height="40"
-              loading="lazy" content-visibility-auto
+              loading="lazy"
             >
           </a>
         </div>
@@ -234,7 +234,7 @@ function toggleWatchLater() {
           <div flex="~" justify="between" w="full" pos="relative">
             <h3
               class="keep-two-lines"
-              text="lg overflow-ellipsis space-normal $bew-text-1"
+              text="lg overflow-ellipsis $bew-text-1" h-3em
               cursor="pointer"
             >
               <a :href="videoUrl" target="_blank" :title="title">
@@ -242,16 +242,16 @@ function toggleWatchLater() {
             </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"
-            >
-              <tabler:dots-vertical text="lg" />
-            </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"
+              >
+                <tabler:dots-vertical text="lg" />
+              </div> -->
 
             <!-- dislike control -->
             <template v-if="showPopCtrl">
@@ -266,52 +266,52 @@ function toggleWatchLater() {
 
               <!-- 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);
-                "
-              >
-                <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> -->
+                  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);
+                  "
+                >
+                  <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>
           </div>
           <div
             v-if="author"
             class="channel-name"
             text="base $bew-text-2"
-            m="t-2"
+            m="t-2" cursor-pointer
             @click="gotoChannel(mid ?? 0)"
           >
             {{ author }}
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index a1177e0c..4e3481a6 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -228,9 +228,9 @@ function setAppThemeColor() {
       bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
   }
 
-  document.body.style.setProperty('--bew-theme-color', settings.value.themeColor)
+  document.documentElement.style.setProperty('--bew-theme-color', settings.value.themeColor)
   for (let i = 0; i < 9; i++)
-    document.body.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
+    document.documentElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToRGBA(settings.value.themeColor, i * 0.1 + 0.1))
 }
 
 function setAppWallpaperMaskingOpacity() {
@@ -411,8 +411,8 @@ function handleBackToTop() {
             </Tooltip>
           </div>
         </aside>
-        <aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-10>
-          <div flex="~ gap-2 col">
+        <aside v-else pos="fixed top-0 right-6px" h-full flex items-center z-10 pointer-events-none>
+          <div flex="~ gap-2 col" pointer-events-auto>
             <Tooltip :content="isDark ? $t('dock.dark_mode') : $t('dock.light_mode')" placement="left">
               <Button size="small" round shadow="$bew-shadow-1" w-45px h-45px @click="toggleDark()">
                 <tabler:moon-stars v-if="isDark" text-xl shrink-0 lh-0 />
diff --git a/src/styles/adaptedStyles/video-page.scss b/src/styles/adaptedStyles/video-page.scss
index 8840fb05..d05286db 100644
--- a/src/styles/adaptedStyles/video-page.scss
+++ b/src/styles/adaptedStyles/video-page.scss
@@ -1,18 +1,3 @@
-// // adjust watcher later playlist container
-// .playlist-container {
-//   padding: 0 70px;
-// }
-
-// // video page
-// .video-container-v1 {
-//   padding: 0 70px;
-// }
-
-.video-container-v1 .right-container,
-.playlist-container .playlist-container--right {
-  width: 350px !important;
-}
-
 .dark {
   .user-card-m-exp .layout {
     display: none;
@@ -39,11 +24,22 @@
   .upinfo-btn-panel .new-charge-btn .charge-btn-icon img,
   .bpx-player-viewpoint-menu-item-active,
   .cur-play-icon,
+  .playing-gif,
   .multi-page-v1 .cur-list .list-box li.on img,
-  .reply-content-container .reply-content .icon {
+  .reply-content-container .reply-content .icon,
+  .coin-operated-m-exp .like-checkbox input[type='checkbox']:checked + i {
     filter: saturate(0) brightness(2);
   }
 
+  .upinfo-btn-panel .follow-btn.not-follow:hover {
+    background-color: var(--bew-theme-color-80);
+  }
+
+  .upinfo-btn-panel .not-follow-charge-btn:hover {
+    border-color: var(--bew-theme-color-80);
+    color: var(--bew-theme-color-80);
+  }
+
   // Tick icon for  danmaku enable
   .bui-danmaku-switch
     .bui-danmaku-switch-input:checked
@@ -63,6 +59,11 @@
   .coin-operated-m-exp .mc-box.on {
     border-color: var(--bew-theme-color);
   }
+  // 投幣按鈕滑過效果
+  .coin-operated-m-exp .coin-bottom .bi-btn:hover {
+    background-color: var(--bew-theme-color-80);
+    border-color: var(--bew-theme-color-80);
+  }
 
   .video-share-popover {
     // border-color: var(--bew-border-color);
@@ -96,4 +97,31 @@
     color: var(--bew-text-2) !important;
     background-color: var(--bew-fill-1) !important;
   }
+
+  // Like & dislike icon
+  .like-icon,
+  .dislike-icon,
+  .sub-like-icon,
+  .sub-dislike-icon {
+    color: var(--bew-text-3) !important;
+  }
+
+  .like-icon:hover,
+  .like-icon.liked,
+  .dislike-icon:hover,
+  .dislike-icon.disliked,
+  .sub-like-icon:hover,
+  .sub-like-icon.liked,
+  .sub-dislike-icon:hover,
+  .sub-dislike-icon.disliked  {
+    color: var(--bew-theme-color) !important;
+  }
+
+  .reply-operation .operation-icon:hover {
+    color: var(--bew-theme-color);
+  }
+
+  .bili-comment.browser-pc * a:hover {
+    color: var(--bew-theme-color-80);
+  }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7d0076f9..54d6cf6f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -144,73 +144,61 @@
   --bew-fill-4: rgb(120 120 140 / 44%);
 }
 
-:root {
-  // --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 {
+//   --v_brand_pink: var(--bew-theme-color, #ff6699);
+//   --v_brand_pink_thin: var(--bew-theme-color-20, #ffecf1);
+//   --v_brand_blue: var(--bew-theme-color, #00aeec);
+//   --v_brand_blue_thin: var(--bew-theme-color-20, #dff6fd);
+//   // --v_stress_red: var(--stress_red, #f85a54);
+//   // --v_stress_red_thin: var(--stress_red_thin, #feecea);
+//   // --v_success_green: var(--success_green, #2ac864);
+//   // --v_success_green_thin: var(--success_green_thin, #e4f8ea);
+//   // --v_operate_orange: var(--operate_orange, #ff7f24);
+//   // --v_operate_orange_thin: var(--operate_orange_thin, #fff0e3);
+//   // --v_pay_yellow: var(--pay_yellow, #ffb027);
+//   // --v_pay_yellow_thin: var(--pay_yellow_thin, #fff6e4);
+//   --v_bg1: var(--bew-bg);
+//   --v_bg2: var(--bew-content-solid-1);
+//   --v_bg3: var(--bew-content-solid-1);
+//   --v_bg1_float: var(--bew-elevated-solid-1, #ffffff);
+//   --v_bg2_float: var(--bew-elevated-solid-2, #f1f2f3);
+//   --v_text_white: var(--text_white, #ffffff);
+//   --v_text1: var(--bew-text-1);
+//   --v_text2: var(--bew-text-2);
+//   --v_text3: var(--bew-text-3);
+//   --v_text4: var(--bew-text-4);
+//   --v_text_link: var(--bew-theme-color);
+//   --v_text_notice: var(--text_notice, #e58900);
+//   --v_line_light: var(--bew-fill-1);
+//   --v_line_regular: var(--bew-fill-2);
+//   --v_line_bold: var(--bew-fill-3);
+//   --v_graph_white: var(--graph_white, #ffffff);
+//   --v_graph_bg_thin: var(--graph_bg_thin, #f6f7f8);
+//   --v_graph_bg_regular: var(--graph_bg_regular, #f1f2f3);
+//   --v_graph_bg_thick: var(--graph_bg_thick, #e3e5e7);
+//   --v_graph_weak: var(--graph_weak, #c9ccd0);
+//   --v_graph_medium: var(--graph_medium, #9499a0);
+//   --v_graph_icon: var(--graph_icon, #61666d);
+//   --v_shadow: var(--shadow, #000000);
+//   --v_brand_pink_hover: var(var(--bew-theme-color-80));
+//   --v_brand_pink_active: var(var(--bew-theme-color));
+//   --v_brand_pink_disabled: var(var(--bew-theme-color-60));
+//   --v_brand_blue_hover: var(var(--bew-theme-color-80));
+//   --v_brand_blue_active: var(var(--bew-theme-color));
+//   --v_brand_blue_disabled: var(var(--bew-theme-color-60));
+//   // --v_stress_red_hover: var(--stress_red_hover, #fa857f);
+//   // --v_stress_red_active: var(--stress_red_active, #e23d3d);
+//   // --v_stress_red_disabled: var(--stress_red_disabled, #fcafaa);
+//   // --v_text_hover: var(--text_hover, #797f87);
+//   // --v_text_active: var(--text_active, #61666d);
+//   // --v_text_disabled: var(--text_disabled, #c9ccd0);
+//   // --v_line_border: var(--line_border, #c9ccd0);
+//   // --v_line_bolder_hover: var(--line_bolder_hover, #e3e5e7);
+//   // --v_line_bolder_active: var(--line_bolder_active, #aeb3b9);
+//   // --v_line_bolder_disabled: var(--line_bolder_disabled, #f1f2f3);
+// }
 
-  // --v_brand_pink: var(--bew-theme-color, #ff6699);
-  // --v_brand_pink_thin: var(--bew-theme-color-20, #ffecf1);
-  // --v_brand_blue: var(--bew-theme-color, #00aeec);
-  // --v_brand_blue_thin: var(--bew-theme-color-20, #dff6fd);
-  // --v_stress_red: var(--stress_red, #f85a54);
-  // --v_stress_red_thin: var(--stress_red_thin, #feecea);
-  // --v_success_green: var(--success_green, #2ac864);
-  // --v_success_green_thin: var(--success_green_thin, #e4f8ea);
-  // --v_operate_orange: var(--operate_orange, #ff7f24);
-  // --v_operate_orange_thin: var(--operate_orange_thin, #fff0e3);
-  // --v_pay_yellow: var(--pay_yellow, #ffb027);
-  // --v_pay_yellow_thin: var(--pay_yellow_thin, #fff6e4);
-  // --v_bg1: var(--bew-content-solid-1);
-  // --v_bg2: var(--bew-content-solid-1);
-  // --v_bg3: var(--bew-content-solid-1);
-  // --v_bg1_float: var(--bew-elevated-solid-1, #ffffff);
-  // --v_bg2_float: var(--bew-elevated-solid-2, #f1f2f3);
-  // --v_text_white: var(--text_white, #ffffff);
-  // --v_text1: var(--bew-text-1);
-  // --v_text2: var(--bew-text-2);
-  // --v_text3: var(--bew-text-3);
-  // --v_text4: var(--bew-text-4);
-  // --v_text_link: var(--bew-theme-color);
-  // --v_text_notice: var(--text_notice, #e58900);
-  // --v_line_light: var(--bew-fill-1);
-  // --v_line_regular: var(--bew-fill-2);
-  // --v_line_bold: var(--bew-fill-3);
-  // --v_graph_white: var(--graph_white, #ffffff);
-  // --v_graph_bg_thin: var(--graph_bg_thin, #f6f7f8);
-  // --v_graph_bg_regular: var(--graph_bg_regular, #f1f2f3);
-  // --v_graph_bg_thick: var(--graph_bg_thick, #e3e5e7);
-  // --v_graph_weak: var(--graph_weak, #c9ccd0);
-  // --v_graph_medium: var(--graph_medium, #9499a0);
-  // --v_graph_icon: var(--graph_icon, #61666d);
-  // --v_shadow: var(--shadow, #000000);
-  // --v_brand_pink_hover: var(--brand_pink_hover, #ff8cb0);
-  // --v_brand_pink_active: var(--brand_pink_active, #e84b85);
-  // --v_brand_pink_disabled: var(--brand_pink_disabled, #ffb3ca);
-  // --v_brand_blue_hover: var(--brand_blue_hover, #40c5f1);
-  // --v_brand_blue_active: var(--brand_blue_active, #008ac5);
-  // --v_brand_blue_disabled: var(--brand_blue_disabled, #80daf6);
-  // --v_stress_red_hover: var(--stress_red_hover, #fa857f);
-  // --v_stress_red_active: var(--stress_red_active, #e23d3d);
-  // --v_stress_red_disabled: var(--stress_red_disabled, #fcafaa);
-  // --v_text_hover: var(--text_hover, #797f87);
-  // --v_text_active: var(--text_active, #61666d);
-  // --v_text_disabled: var(--text_disabled, #c9ccd0);
-  // --v_line_border: var(--line_border, #c9ccd0);
-  // --v_line_bolder_hover: var(--line_bolder_hover, #e3e5e7);
-  // --v_line_bolder_active: var(--line_bolder_active, #aeb3b9);
-  // --v_line_bolder_disabled: var(--line_bolder_disabled, #f1f2f3);
-}
-
-:root.dark,
-.dark body {
+:root.dark {
   --brand_pink: var(--bew-theme-color);
   --brand_pink_thin: var(--bew-theme-color-20);
   --brand_blue: var(--bew-theme-color);
@@ -247,12 +235,16 @@
   --graph_icon: var(--Ga7);
   --shadow: var(--Ba0);
 
-  --bpx-primary-color: var(--bew-theme-color);
-  --bpx-fn-color: var(--bew-theme-color);
-  --bpx-fn-hover-color: var(--bew-theme-color);
+  // --bpx-primary-color: var(--bew-theme-color);
+  // --bpx-fn-color: var(--bew-theme-color);
+  // --bpx-fn-hover-color: var(--bew-theme-color);
 
-  --v_brand_blue: var(--brand_blue);
-  --v_brand_blue_thin: var(--brand_blue_thin);
+  --brand_pink_hover: var(--bew-theme-color-80);
+  --brand_pink_active: var(--bew-theme-color);
+  --brand_pink_disabled: var(--bew-theme-color-60);
+  --brand_blue_hover: var(--bew-theme-color-80);
+  --brand_blue_active: var(--bew-theme-color);
+  --brand_blue_disabled: var(--bew-theme-color-60);
 }
 
 :root.dark {