Optimize the registry for dark and light mode (#5395)

Author: SusanGithaigaN

assets/scss/_registry.scss

@@ -39,3 +39,26 @@
 .registry-entry {
   @extend .shadow;
 }
+
+#searchForm .btn.btn-outline-success,
+.btn-outline-danger,
+.btn-outline-secondary {
+  &:hover {
+    color: var(--bs-white);
+  }
+}
+
+@include color-mode(dark) {
+  @media (prefers-color-scheme: dark) {
+    .border-default {
+      border-color: #a3a3a3;
+    }
+    .card.registry-entry {
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
+    }
+    .card.registry-entry,
+    .list-group > .list-group-item {
+      background-color: #262d2c;
+    }
+  }
+}

layouts/partials/ecosystem/registry/entry.html

@@ -64,7 +64,7 @@
         {{ $package = merge .package (index $remoteRegistries .package.registry) -}}
         {{ $package = merge $package (dict "type" .registryType) -}}
     {{ end -}}
-    {{ $highlightStyle := "" -}}
+    {{ $highlightStyle := "border-default" -}}
     {{ if $isNew -}}
         {{ $highlightStyle = "border-info" -}}
     {{ end -}}