diff --git a/apps/theming/css/ionos/_layout.css b/apps/theming/css/ionos/_layout.css index 3293bdc987c25..38e4cf129d404 100644 --- a/apps/theming/css/ionos/_layout.css +++ b/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); - } - } } } diff --git a/apps/theming/css/ionos/activity.css b/apps/theming/css/ionos/activity.css deleted file mode 100644 index a2a7b52cecd78..0000000000000 --- a/apps/theming/css/ionos/activity.css +++ /dev/null @@ -1,8 +0,0 @@ -.content.app-activity { - img { - filter: none; - @media (prefers-color-scheme: dark) { - filter: invert(100%); - } - } -} diff --git a/apps/theming/css/ionos/files.css b/apps/theming/css/ionos/files.css index 4838c7ac43515..e2759b6fbeca4 100644 --- a/apps/theming/css/ionos/files.css +++ b/apps/theming/css/ionos/files.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; } diff --git a/apps/theming/css/ionos/notes.css b/apps/theming/css/ionos/notes.css index 9b30e1f71d5de..973222218e13a 100644 --- a/apps/theming/css/ionos/notes.css +++ b/apps/theming/css/ionos/notes.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%); - } - } } } diff --git a/apps/theming/css/ionos/profile.css b/apps/theming/css/ionos/profile.css index b3930e94a4c8b..0d7f2ad66d1d3 100644 --- a/apps/theming/css/ionos/profile.css +++ b/apps/theming/css/ionos/profile.css @@ -1,9 +1,6 @@ .app-profile.content { .user-actions__other.action-items img { - filter: none; - @media (prefers-color-scheme: dark) { - filter: invert(100%); - } + } } diff --git a/apps/theming/css/ionos/sidebar.css b/apps/theming/css/ionos/sidebar.css index 31b2fd852edcd..862e88d0adacb 100644 --- a/apps/theming/css/ionos/sidebar.css +++ b/apps/theming/css/ionos/sidebar.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) { diff --git a/apps/theming/css/ionos/variables.css b/apps/theming/css/ionos/variables.css index 903b067f43e79..696c765232d2f 100644 --- a/apps/theming/css/ionos/variables.css +++ b/apps/theming/css/ionos/variables.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); diff --git a/apps/theming/lib/Themes/IonosTheme.php b/apps/theming/lib/Themes/IonosTheme.php index 00f29a57d5a1b..9b5fbc490a99d 100644 --- a/apps/theming/lib/Themes/IonosTheme.php +++ b/apps/theming/lib/Themes/IonosTheme.php @@ -135,6 +135,14 @@ private function generateSingleFontFace(string $fileVariant, string $weight): st public function getCSSVariables(): array { $defaultVariables = parent::getCSSVariables(); + + // Remove background invert variables from parent + unset( + $defaultVariables['--background-invert-if-dark'], + $defaultVariables['--background-invert-if-bright'], + $defaultVariables['--background-image-invert-if-bright'] + ); + $originalFontFace = $defaultVariables['--font-face']; // IONOS COLORS