fix: add different background for dark mode on hover (#2924)

vuejs-translations · Jul 11, 2024 · a4a84f3 · a4a84f3
1 parent c03f0a5
commit a4a84f3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue
@@ -161,10 +161,17 @@ html:not(.dark) .accent,
     linear-gradient(45deg, #42d392, #647eff) border-box;
   border: 2px solid transparent;
 }
+
 .actions .security:hover {
   background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, 
     linear-gradient(45deg, #42d392, #647eff) border-box;
 }
+
+.dark .actions .security:hover {
+  background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, 
+    linear-gradient(45deg, #42d392, #647eff) border-box;
+}
+
 .actions .security .icon {
   width: 12px;
   height: 12px;

diff --git a/.vitepress/theme/components/SecurityUpdateBtn.vue b/.vitepress/theme/components/SecurityUpdateBtn.vue
@@ -44,6 +44,10 @@
       linear-gradient(45deg, #42d392, #647eff) border-box;
     transition-duration: 0.2s;
   }
+  .dark .container .security:hover {
+    background: linear-gradient(var(--vt-c-gray-dark-3), var(--vt-c-gray-dark-3)) padding-box, 
+      linear-gradient(45deg, #42d392, #647eff) border-box;
+  }
   .container .security .icon {
     width: 12px;
     height: 12px;