fix: update colors

src/App.vue

@@ -72,6 +72,8 @@ export default {
   --color-secondary: #7a7a7b;
   --color-secondary-bg: #f5f5f7;
   --color-navbar-bg: rgba(255, 255, 255, 0.86);
+  --color-primary-bg-for-transparent: rgba(189, 207, 255, 0.28);
+  --color-secondary-bg-for-transparent: rgba(209, 209, 214, 0.28);
 }
 
 [data-theme="dark"] {
@@ -83,6 +85,8 @@ export default {
   --color-secondary-bg: #323232;
   --color-navbar-bg: #335eea;
   --color-navbar-bg: rgba(34, 34, 34, 0.86);
+  --color-primary-bg-for-transparent: rgba(255, 255, 255, 0.12);
+  --color-secondary-bg-for-transparent: rgba(255, 255, 255, 0.08);
 }
 
 #app {

src/components/ButtonIcon.vue

@@ -27,7 +27,7 @@ button {
     margin-left: 0;
   }
   &:hover {
-    background: var(--color-secondary-bg);
+    background: var(--color-secondary-bg-for-transparent);
   }
   &:active {
     transform: scale(0.92);

src/components/ContextMenu.vue

@@ -85,6 +85,9 @@ export default {
     backdrop-filter: blur(16px) contrast(120%);
     border: 1px solid rgba(255, 255, 255, 0.08);
   }
+  .menu .item:hover {
+    color: var(--color-text);
+  }
 }
 
 .menu .item {
@@ -95,7 +98,8 @@ export default {
   cursor: default;
   color: var(--color-text);
   &:hover {
-    background: var(--color-secondary-bg);
+    color: var(--color-primary);
+    background: var(--color-primary-bg-for-transparent);
   }
 }
 

src/components/Navbar.vue

@@ -139,7 +139,7 @@ nav {
       left: 12px;
     }
     &:hover {
-      background: var(--color-secondary-bg);
+      background: var(--color-secondary-bg-for-transparent);
     }
     &:active {
       transform: scale(0.92);
@@ -167,7 +167,7 @@ nav {
     display: flex;
     align-items: center;
     height: 32px;
-    background: var(--color-secondary-bg);
+    background: var(--color-secondary-bg-for-transparent);
     border-radius: 8px;
     width: 200px;
   }
@@ -194,7 +194,7 @@ nav {
   }
 
   .active {
-    background: var(--color-primary-bg);
+    background: var(--color-primary-bg-for-transparent);
     input,
     .svg-icon {
       opacity: 1;
@@ -203,6 +203,17 @@ nav {
   }
 }
 
+[data-theme="dark"] {
+  .search-box {
+    .active {
+      input,
+      .svg-icon {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
 .right-part {
   flex: 1;
   display: flex;