From 31921ac369ff9d0ac3022b8b52c2fcac07763575 Mon Sep 17 00:00:00 2001 From: Simon L Date: Wed, 24 Jan 2024 13:02:54 +0100 Subject: [PATCH 1/2] fix wrong icon color in app store MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Simon L Co-Authored-By: John Molakvoæ --- apps/settings/src/views/Apps.vue | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue index b5cfad5632fd5..16435041c16a5 100644 --- a/apps/settings/src/views/Apps.vue +++ b/apps/settings/src/views/Apps.vue @@ -396,6 +396,28 @@ export default { right: -8px; } +// Fix wrong color for active icons +@media (prefers-color-scheme: dark) { body { + .app-navigation-entry.active .app-navigation-entry-icon { + filter: var(--primary-invert-if-bright); + } +}} +@media (prefers-color-scheme: light) { body { + .app-navigation-entry.active .app-navigation-entry-icon { + filter: var(--primary-invert-if-dark); + } +}} +[data-themes*=dark] { + .app-navigation-entry.active .app-navigation-entry-icon { + filter: var(--primary-invert-if-bright); + } +} +[data-themes*=light] { + .app-navigation-entry.active .app-navigation-entry-icon { + filter: var(--primary-invert-if-dark); + } +} + .app-sidebar-tabs__release { h2 { border-bottom: 1px solid var(--color-border); From b2d1ec95fed49e2e7160b9e8ffe3f80e7bf070d8 Mon Sep 17 00:00:00 2001 From: Simon L Date: Fri, 9 Feb 2024 11:47:50 +0100 Subject: [PATCH 2/2] add deep back Signed-off-by: Simon L --- apps/settings/src/views/Apps.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/settings/src/views/Apps.vue b/apps/settings/src/views/Apps.vue index 16435041c16a5..28f9867685f57 100644 --- a/apps/settings/src/views/Apps.vue +++ b/apps/settings/src/views/Apps.vue @@ -398,22 +398,22 @@ export default { // Fix wrong color for active icons @media (prefers-color-scheme: dark) { body { - .app-navigation-entry.active .app-navigation-entry-icon { + :deep(.app-navigation-entry.active .app-navigation-entry-icon) { filter: var(--primary-invert-if-bright); } }} @media (prefers-color-scheme: light) { body { - .app-navigation-entry.active .app-navigation-entry-icon { + :deep(.app-navigation-entry.active .app-navigation-entry-icon) { filter: var(--primary-invert-if-dark); } }} [data-themes*=dark] { - .app-navigation-entry.active .app-navigation-entry-icon { + :deep(.app-navigation-entry.active .app-navigation-entry-icon) { filter: var(--primary-invert-if-bright); } } [data-themes*=light] { - .app-navigation-entry.active .app-navigation-entry-icon { + :deep(.app-navigation-entry.active .app-navigation-entry-icon) { filter: var(--primary-invert-if-dark); } }