Invert header icon on bright preset backgrounds

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Oct 19, 2022 · 873120d · 873120d
1 parent d64e241
commit 873120d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/js/notifications-main.js b/js/notifications-main.js
diff --git a/js/notifications-main.js.map b/js/notifications-main.js.map
diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
@@ -8,11 +8,13 @@
 		@open="onOpen">
 		<template #trigger>
 			<Bell v-if="notifications.length === 0 && webNotificationsGranted !== null && !hasThrottledPushNotifications"
+				class="notifications-button__icon"
 				:size="20"
 				:title="t('notifications', 'Notifications')"
 				fill-color="var(--color-primary-text)" />
 			<!-- From material design icons -->
 			<svg v-else
+				class="notifications-button__icon"
 				xmlns="http://www.w3.org/2000/svg"
 				xmlns:xlink="http://www.w3.org/1999/xlink"
 				version="1.1"
@@ -479,6 +481,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.notifications-button__icon {
+	filter: var(--background-image-invert-if-bright);
+}
+
 .notification-container {
 	/* Prevent slide animation to go out of the div */
 	overflow: hidden;