fix(notification): Fix color of notification icon in browser notifica…

js/notifications-main.mjs

@@ -1,3 +1,3 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-B_-k0FO_.chunk.mjs'),window.OC.filePath('notifications', '', 'js/_plugin-vue_export-helper-DeulTHOa.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-CmkSqeLD.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BYxxunTY.chunk.css'),window.OC.filePath('notifications', '', 'css/_plugin-vue_export-helper-C2r1Hes2.chunk.css'),window.OC.filePath('notifications', '', 'js/vite-preload-helper-DxYC2qmj.chunk.mjs'),window.OC.filePath('notifications', '', 'js/BrowserStorage-COnnri8-.chunk.mjs'),window.OC.filePath('notifications', '', 'css/NotificationsApp-CLUsCUd8.chunk.css')])))=>i.map(i=>d[i]);
-import{_ as o}from"./vite-preload-helper-DxYC2qmj.chunk.mjs";import{c as i,d as n}from"./style-CmkSqeLD.chunk.mjs";const m=n(()=>o(()=>import("./NotificationsApp-B_-k0FO_.chunk.mjs").then(t=>t.N),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url));i(m).mount("#notifications");
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=[window.OC.filePath('notifications', '', 'js/NotificationsApp-qzPKH8x-.chunk.mjs'),window.OC.filePath('notifications', '', 'js/_plugin-vue_export-helper-DeulTHOa.chunk.mjs'),window.OC.filePath('notifications', '', 'js/style-CmkSqeLD.chunk.mjs'),window.OC.filePath('notifications', '', 'css/style-BYxxunTY.chunk.css'),window.OC.filePath('notifications', '', 'css/_plugin-vue_export-helper-C2r1Hes2.chunk.css'),window.OC.filePath('notifications', '', 'js/vite-preload-helper-DxYC2qmj.chunk.mjs'),window.OC.filePath('notifications', '', 'js/BrowserStorage-COnnri8-.chunk.mjs'),window.OC.filePath('notifications', '', 'css/NotificationsApp-CLUsCUd8.chunk.css')])))=>i.map(i=>d[i]);
+import{_ as o}from"./vite-preload-helper-DxYC2qmj.chunk.mjs";import{c as i,d as n}from"./style-CmkSqeLD.chunk.mjs";const m=n(()=>o(()=>import("./NotificationsApp-qzPKH8x-.chunk.mjs").then(t=>t.N),__vite__mapDeps([0,1,2,3,4,5,6,7]),import.meta.url));i(m).mount("#notifications");
 //# sourceMappingURL=notifications-main.mjs.map

src/services/webNotificationsService.js

@@ -10,22 +10,68 @@ import { generateFilePath } from '@nextcloud/router'
 import { Howl } from 'howler'
 import BrowserStorage from './BrowserStorage.js'
 
+/**
+ * Add primary-element background and color the icon in matching text color
+ *
+ * @param {string} iconUrl URL of the icon (typically black on transparent)
+ * @return {Promise<string>} data URL of the themed icon
+ */
+function invertIconColors(iconUrl) {
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.crossOrigin = 'anonymous'
+		img.onload = () => {
+			const canvas = document.createElement('canvas')
+			const size = 32 + 4 * (Math.max(img.width, img.height) || 16)
+			canvas.width = size
+			canvas.height = size
+			const ctx = canvas.getContext('2d')
+
+			ctx.fillStyle = getComputedStyle(document.body).getPropertyValue('--color-primary-element')
+			ctx.beginPath()
+			ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI)
+			ctx.fill()
+
+			// Apply invert filter when the font-color is not supposed to be black
+			if (getComputedStyle(document.body).getPropertyValue('--color-primary-text') !== '#000000') {
+				ctx.filter = 'invert(100%)'
+			}
+			const x = (size - 4 * img.width) / 2
+			const y = (size - 4 * img.height) / 2
+			ctx.drawImage(img, x, y, img.width * 4, img.height * 4)
+
+			resolve(canvas.toDataURL('image/png'))
+		}
+		img.onerror = reject
+		img.src = iconUrl
+	})
+}
+
 /**
  * Create a browser notification
  *
  * @param {object} notification notification object
  * @see https://developer.mozilla.org/en/docs/Web/API/notification
  */
-function createWebNotification(notification) {
+async function createWebNotification(notification) {
 	if (!notification.shouldNotify) {
 		return
 	}
 
+	let icon = notification.icon
+	if (icon) {
+		try {
+			icon = await invertIconColors(icon)
+		} catch (e) {
+			console.info('Failed to apply coloring to notification icon, using original', e)
+		}
+	}
+
 	const n = new Notification(notification.subject, {
 		title: notification.subject,
 		lang: getLanguage(),
 		body: notification.message,
-		icon: notification.icon,
+		icon,
 		tag: notification.notificationId,
 	})