moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(accessibility): Make darkmode have sufficient contrast

Browse Source
This commit is contained in:
moanos [he/him]
2025-06-24 13:47:24 +02:00
parent 2330542a85
commit ae2ac5c462
1 changed files with 102 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/fellchensammlung/static/fellchensammlung/css/main.scss
View File

@@ -2,7 +2,7 @@ $primary: #6CD4FF;
$link: #292a2c; $link: #292a2c;
$grey-light: #c4c6ce; $grey-light: #c4c6ce;
$grey-dark: #262728; $grey-dark: #262728;
$confirm: hsl(133deg ,100%,calc(41% + 0%)); $confirm: hsl(133deg, 100%, calc(41% + 0%));
// Path to Bulma's sass folder // Path to Bulma's sass folder
@use "bulma/sass" with ( @use "bulma/sass" with (
@@ -15,6 +15,22 @@ $confirm: hsl(133deg ,100%,calc(41% + 0%));
$input-shadow: none $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 // General Styles
@@ -113,9 +129,11 @@ p > a.button {
.card-footer { .card-footer {
overflow: hidden; overflow: hidden;
} }
.card-footer .card-footer-item.is-confirm { .card-footer .card-footer-item.is-confirm {
background-color: $confirm; background-color: $confirm;
} }
.card-footer .card-footer-item.is-confirm:hover { .card-footer .card-footer-item.is-confirm:hover {
filter: brightness(0.9); filter: brightness(0.9);
} }
@@ -123,6 +141,7 @@ p > a.button {
.card-footer .card-footer-item.is-danger { .card-footer .card-footer-item.is-danger {
background-color: sass.$danger; background-color: sass.$danger;
} }
.card-footer .card-footer-item.is-danger:hover { .card-footer .card-footer-item.is-danger:hover {
filter: brightness(0.9); filter: brightness(0.9);
} }