fix: invert shopping list icons to black in light mode

White PNG icons were invisible on light backgrounds. Added semantic
--shopping-icon-filter variable (invert(1) in light, none in dark)
applied to card and picker icons.
This commit is contained in:
2026-04-08 16:30:00 +02:00
parent 74d5562fed
commit 6ad394d3a5
3 changed files with 10 additions and 1 deletions

View File

@@ -1,6 +1,6 @@
{ {
"name": "homepage", "name": "homepage",
"version": "1.13.2", "version": "1.13.3",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

View File

@@ -149,6 +149,9 @@
--text-xl: 1.5rem; --text-xl: 1.5rem;
--text-2xl: 2rem; --text-2xl: 2rem;
--text-3xl: 3rem; --text-3xl: 3rem;
/* Shopping icon filter — white PNGs need invert in light mode */
--shopping-icon-filter: invert(1);
} }
/* ============================================ /* ============================================
@@ -212,6 +215,8 @@
--color-link: var(--nord8); --color-link: var(--nord8);
--color-link-visited: #c89fb6; --color-link-visited: #c89fb6;
--color-link-hover: var(--nord7); --color-link-hover: var(--nord7);
--shopping-icon-filter: none;
} }
} }
@@ -261,6 +266,8 @@
--color-link: var(--nord8); --color-link: var(--nord8);
--color-link-visited: #c89fb6; --color-link-visited: #c89fb6;
--color-link-hover: var(--nord7); --color-link-hover: var(--nord7);
--shopping-icon-filter: none;
} }
/* ============================================ /* ============================================

View File

@@ -811,6 +811,7 @@
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
filter: var(--shopping-icon-filter, none);
} }
.item-card.checked .card-icon { .item-card.checked .card-icon {
filter: grayscale(0.6); filter: grayscale(0.6);
@@ -1016,6 +1017,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
filter: var(--shopping-icon-filter, none);
} }
.edit-actions { .edit-actions {