IONOS(theming): set icon filter variable globally

and remove workarounds from app specific css files.

Signed-off-by: Kai Henseler <kai.henseler@strato.de>

Author: bromiesTM

apps/theming/css/ionos/_layout.css

@@ -57,13 +57,6 @@
 	}
 
 	.contactsmenu__menu {
-		.contact__action__icon {
-			filter: invert(100%);
-			@media (prefers-color-scheme: light) {
-				filter: none;
-			}
-		}
-
 		.contactsmenu__menu__content__footer .button-vue--vue-tertiary {
 			background-color: var(--ion-button-secondary-background-default);
 			color: var(--ion-button-secondary-text);
@@ -90,7 +83,6 @@
 }
 
 
-
 #content-vue {
 	margin: var(--header-height) 0 0 0;
 	width: 100%;
@@ -119,12 +111,6 @@
 
 	.panel {
 		background-color: var(--ion-surface-secondary);
-		.panel--header img {
-			filter: none;
-			@media (prefers-color-scheme: dark) {
-				filter: var(--background-invert-if-bright);
-			}
-		}
 	}
 }
 

apps/theming/css/ionos/activity.css

@@ -262,12 +262,6 @@ div.v-popper--theme-dropdown.v-popper__popper:has(.v-popper__wrapper), .header-m
 				}
 
 				a {
-					img.account-menu-entry__icon, img.account-menu-entry__icon--active {
-						filter: none;
-						@media (prefers-color-scheme: dark) {
-								filter: invert(100%);
-						}
-					}
 					.list-item-content__name {
 						color: var(--ion-context-menu-item-text) !important;
 					}

apps/theming/css/ionos/files.css

@@ -7,12 +7,5 @@ div.suggestion-list {
 		&.is-selected {
 			background-color: var(--ion-context-menu-item-background-active);
 		}
-
-		img {
-			filter: none;
-			@media (prefers-color-scheme: dark) {
-				filter: invert(100%);
-			}
-		}
 	}
 }

apps/theming/css/ionos/notes.css

@@ -1,9 +1,6 @@
 .app-profile.content {
 	.user-actions__other.action-items img {
-		filter: none;
-		@media (prefers-color-scheme: dark) {
-			filter: invert(100%);
-		}
+
 
 	}
 }

apps/theming/css/ionos/profile.css

@@ -45,23 +45,11 @@ div.app-navigation, div#app-navigation {
 				.app-navigation-entry-link {
 					color: var(--ion-button-sidebar-text) !important;
 				}
-				img {
-					filter: none;
-				}
-				@media (prefers-color-scheme: dark) {
-					img {
-						filter: invert(100%);
-					}
-				}
 			}
 			&:hover {
 				background-color: var(--ion-button-sidebar-background-hover);
 			}
-			@media (prefers-color-scheme: dark) {
-				img {
-					filter: invert(100%);
-				}
-			}
+
 		}
 
 		.app-navigation-entry--opened:has(.app-navigation-entry__children) {

apps/theming/css/ionos/sidebar.css

@@ -1,4 +1,22 @@
 & {
+	/* Background inversion for light/dark mode */
+	--background-invert-if-dark: no;
+	--background-invert-if-bright: invert(100%);
+	--background-image-invert-if-bright: no;
+	/* Primary color inversion for light/dark mode */
+	--primary-invert-if-bright: no;
+	--primary-invert-if-dark: invert(100%);
+
+	@media (prefers-color-scheme: dark) {
+		--background-invert-if-dark: invert(100%);
+		--background-invert-if-bright: no;
+		--background-image-invert-if-bright: invert(100%);
+
+		--primary-invert-if-bright: invert(100%);
+		--primary-invert-if-dark: no;
+	}
+
+
 	/* Text colors */
 	--ion-text: light-dark(var(--ion-color-secondary), var(--ion-color-cool-grey-c1));
 	--ion-text-bright: var(--ion-color-cool-grey-c7);