diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss
index 3585ec3313..62700ed39d 100644
--- a/pkg/web_css/lib/src/_home.scss
+++ b/pkg/web_css/lib/src/_home.scss
@@ -106,16 +106,16 @@
   }
 
   .mini-list-item {
+    @include variables.elevated-content-border;
+
     background: var(--pub-neutral-bgColor);
     border-radius: 4px;
-    box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);
     padding: 28px 30px 30px; // title's top gap is about 2px (30-2 => 28)
     margin-bottom: 10px;
     min-height: 100px;
 
     &:hover {
       background: var(--pub-neutral-hover-bgColor);
-      box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
 
       @media (min-width: variables.$device-desktop-min-width) {
         .mini-list-item-body {
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 0fb36f4801..fabda1a3a0 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -244,6 +244,24 @@
   }
 }
 
+@mixin elevated-content-border {
+  .light-theme & {
+    box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);
+
+    &:hover {
+      box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
+    }
+  }
+
+  .dark-theme & {
+    border: 1px solid var(--pub-home_card-box_shadow-color);
+
+    &:hover {
+      border-color: var(--pub-home_card_hover-box_shadow-color);
+    }
+  }
+}
+
 $device-desktop-min-width: 641px;
 $device-mobile-max-width: 640px;
 $device-tablet-max-width: 979px;