From fe16e676c80b6d6f4b1b7fbae632f194e3fffc95 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Wed, 19 Oct 2022 01:59:15 +0000
Subject: [PATCH] Invert header icon on bright preset backgrounds

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/NotificationsApp.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index 5e9e311ef..a1a9c4863 100644
--- 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;