diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 4d337163..dc50b933 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -445,10 +445,10 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
 }
 
 .dock-item {
-  --shadow-dark: 0 4px 30px 4px var(--bew-theme-color-60);
-  --shadow-active: 0 4px 30px var(--bew-theme-color-70);
-  --shadow-dark-active: 0 4px 20px var(--bew-theme-color-80);
-  --shadow-active-active: 0 4px 20px var(--bew-theme-color-90);
+  --shadow-dark: 0 4px 30px 4px rgba(255, 255, 255, 0.6);
+  --shadow-active: 0 4px 30px var(--bew-theme-color-60);
+  --shadow-dark-active: 0 4px 20px rgba(255, 255, 255, 0.8);
+  --shadow-active-active: 0 4px 20px var(--bew-theme-color-80);
 
   --uno: "relative transform active:important-scale-90 hover:scale-110";
   --uno: "lg:w-45px w-35px";
@@ -480,7 +480,7 @@ const dockTransformStyle = computed((): { transform: string, transformOrigin: st
   }
 
   &.active {
-    --uno: "important-bg-$bew-theme-color-80 text-white";
+    --uno: "important-bg-$bew-theme-color text-white !dark:bg-white !dark:text-black";
     --uno: "shadow-$shadow-active dark:shadow-$shadow-dark";
     --uno: "active:shadow-$shadow-active-active dark-active:shadow-$shadow-dark-active";
   }
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 5caa4bfe..670724de 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -3,6 +3,7 @@ import { onClickOutside, onKeyStroke, useMouseInElement } from '@vueuse/core'
 import type { Ref, UnwrapNestedRefs } from 'vue'
 
 import { useBewlyApp } from '~/composables/useAppProvider'
+import { useDark } from '~/composables/useDark'
 import { useDelayedHover } from '~/composables/useDelayedHover'
 import { OVERLAY_SCROLL_BAR_SCROLL, TOP_BAR_VISIBILITY_CHANGE } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
@@ -37,6 +38,7 @@ import type { UnReadDm, UnReadMessage, UserInfo } from './types'
 // })
 
 const { activatedPage, scrollbarRef, reachTop } = useBewlyApp()
+const { isDark } = useDark()
 
 const mid = getUserID() || ''
 const userInfo = reactive<UserInfo | NonNullable<unknown>>({}) as UnwrapNestedRefs<UserInfo>
@@ -507,7 +509,6 @@ defineExpose({
           pointer-events-none transform-gpu
         />
 
-        <!-- <Transition name="fade"> -->
         <div
           pos="absolute top-0 left-0" w-full
           pointer-events-none opacity-100 duration-300
@@ -521,7 +522,15 @@ defineExpose({
             height: reachTop ? 'var(--bew-top-bar-height)' : 'calc(var(--bew-top-bar-height) + 20px)',
           }"
         />
-        <!-- </Transition> -->
+
+        <!-- Top bar theme color gradient -->
+        <Transition name="fade">
+          <div
+            v-if="reachTop && !forceWhiteIcon && activatedPage !== AppPage.Search && isDark"
+            pos="absolute top-0 left-0" w-full h="$bew-top-bar-height" pointer-events-none
+            :style="{ background: 'linear-gradient(to bottom, var(--bew-theme-color-10), transparent)' }"
+          />
+        </Transition>
 
         <div shrink-0 flex="inline xl:1 justify-start items-center gap-2">
           <div
@@ -576,7 +585,7 @@ defineExpose({
               v-if="showSearchBar"
               class="search-bar"
               :style="{
-                '--b-search-bar-normal-color': settings.disableFrostedGlass ? 'var(--bew-elevated)' : 'color-mix(in oklab, var(--bew-elevated-solid), transparent 80%)',
+                '--b-search-bar-normal-color': settings.disableFrostedGlass ? 'var(--bew-elevated)' : 'color-mix(in oklab, var(--bew-elevated-solid), transparent 60%)',
                 '--b-search-bar-hover-color': 'var(--bew-elevated-hover)',
                 '--b-search-bar-focus-color': 'var(--bew-elevated)',
                 '--b-search-bar-normal-icon-color': forceWhiteIcon && !settings.disableFrostedGlass ? 'white' : 'var(--bew-text-1)',