fix(accessibility): Make darkmode have sufficient contrast

src/fellchensammlung/static/fellchensammlung/css/main.scss

@@ -2,7 +2,7 @@ $primary: #6CD4FF;
 $link: #292a2c;
 $grey-light: #c4c6ce;
 $grey-dark: #262728;
-$confirm: hsl(133deg ,100%,calc(41% + 0%));
+$confirm: hsl(133deg, 100%, calc(41% + 0%));
 
 // Path to Bulma's sass folder
 @use "bulma/sass" with (
@@ -15,6 +15,22 @@ $confirm: hsl(133deg ,100%,calc(41% + 0%));
   $input-shadow: none
 );
 
+@use "bulma/sass/utilities/css-variables" as cv;
+
+@include cv.system-theme($name: "dark") {
+  .navbar-item > img {
+    background-color: $grey-light !important;
+    border-radius: 5px;
+  }
+  .card-header {
+    background-color: $grey-dark;
+  }
+  .tag {
+    color: $grey-dark;
+    background-color: $grey-light;
+  }
+}
+
 
 // General Styles
 
@@ -113,9 +129,11 @@ p > a.button {
 .card-footer {
   overflow: hidden;
 }
+
 .card-footer .card-footer-item.is-confirm {
   background-color: $confirm;
 }
+
 .card-footer .card-footer-item.is-confirm:hover {
   filter: brightness(0.9);
 }
@@ -123,6 +141,7 @@ p > a.button {
 .card-footer .card-footer-item.is-danger {
   background-color: sass.$danger;
 }
+
 .card-footer .card-footer-item.is-danger:hover {
   filter: brightness(0.9);
 }