Customize data container styling

assets/scss/_registry.scss

@@ -40,39 +40,38 @@
   @extend .shadow;
 }
 
-
-// Optimize styles and responsiveness for dark and light mode, see https://getbootstrap.com/docs/5.3/customize/color-modes/    
-.btn.btn-outline-success {
-  color: var(--bs-emphasis-color);
-
-  &:hover,
-  &:focus,
-  &:active
-  {
-    color: var(--bs-white); 
+// Optimize styles and responsiveness for dark and light mode, see https://getbootstrap.com/docs/5.3/customize/color-modes/
+#searchForm .btn.btn-outline-success,
+.btn-outline-danger,
+.btn-outline-secondary {
+  &:hover {
+    color: var(--bs-white);
   }
 }
 
-.badge.rounded-pill.text-bg-primary{
+.badge.rounded-pill.text-bg-primary {
   font-weight: $font-weight-bold;
 }
 
-
 // override search box entry border styling in dark mode for mobile devices
-$color-mode-type: data; 
+$color-mode-type: data;
 
 @include color-mode(dark) {
   @media (max-width: 767.98px) {
     .form-control {
-      border: 1px solid rgba(var(--bs-body-color-rgb), 0.6); 
+      border: 1px solid rgba(var(--bs-body-color-rgb), 0.6);
     }
-    .ms-auto > .badge{
+    .ms-auto > .badge {
       font-size: $font-size-sm;
     }
-
   }
 }
 
+// Define dark mode colors for data container
+$dark-border-color: darken(#cccccc, 20%);
 
-
-
+@media (prefers-color-scheme: dark) {
+  .registry-entry .border-secondary {
+    border-color: $dark-border-color;
+  }
+}