Added darkmode icons

src/services/getTheme.js

@@ -0,0 +1,25 @@
+/**
+ * Determines the current theme of the document.
+ *
+ * This function checks the `data-theme-light` and `data-theme-default` attributes
+ * on the document body to determine the theme. If `data-theme-light` is present,
+ * it returns 'light'. If `data-theme-default` is present, it checks the user's
+ * preferred color scheme using the `window.matchMedia` API and returns 'light' or 'dark'
+ * accordingly. If neither attribute is present, it defaults to 'dark'.
+ *
+ * @return { 'light' | 'dark' } The current theme, either 'light' or 'dark'.
+ */
+export const getTheme = () => {
+	if (document.body.hasAttribute('data-theme-light')) {
+		return 'light'
+	}
+
+	if (document.body.hasAttribute('data-theme-dark')) {
+		return 'dark'
+	}
+
+	if (document.body.hasAttribute('data-theme-default')) {
+		return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+	}
+	return 'light'
+}

src/views/widgets/ContactMomentenWidget.vue

@@ -34,6 +34,7 @@ import { berichtStore, navigationStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ChatOutline from 'vue-material-design-icons/ChatOutline.vue'
 import BerichtForm from '../../modals/berichten/EditBericht.vue'
@@ -75,12 +76,16 @@ export default {
 						id: bericht.id,
 						mainText: bericht.title,
 						subText: bericht.aanmaakDatum,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/chat-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/chat-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/chat-outline.svg'
+		},
 		openModal() {
 			this.isModalOpen = true
 			berichtStore.setBerichtItem(null)

src/views/widgets/OpenZakenWidget.vue

@@ -29,6 +29,7 @@ import { zaakStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import OpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 
@@ -68,12 +69,16 @@ export default {
 						id: zaak.id,
 						mainText: zaak.identificatie,
 						subText: zaak.zaaktype,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/briefcase-account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg'
+		},
 		search() {
 			console.info('click')
 		},

src/views/widgets/OrganisatiesWidget.vue

@@ -41,6 +41,7 @@ import { klantStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
 
@@ -82,7 +83,7 @@ export default {
 						id: organisatie.id,
 						mainText: organisatie.bedrijfsnaam,
 						subText: organisatie.websiteUrl,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/office-building-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 
 					this.loading = false
@@ -96,14 +97,18 @@ export default {
 						id: organisatie.id,
 						mainText: organisatie.bedrijfsnaam,
 						subText: organisatie.websiteUrl,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/office-building-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 					this.loading = false
 				})
 				.finally(() => {
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/office-building-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/office-building-outline.svg'
+		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},

src/views/widgets/PersonenWidget.vue

@@ -41,6 +41,7 @@ import { klantStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton, NcTextField } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import Search from 'vue-material-design-icons/Magnify.vue'
 import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 
@@ -84,7 +85,7 @@ export default {
 						id: person.id,
 						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 					this.loading = false
 				})
@@ -97,14 +98,18 @@ export default {
 						id: person.id,
 						mainText: `${person.voornaam} ${person.tussenvoegsel} ${person.achternaam}`,
 						subText: person.emailadres,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/account-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 					this.loading = false
 				})
 				.finally(() => {
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/account-outline.svg'
+		},
 		onShow() {
 			window.open('/apps/opencatalogi/catalogi', '_self')
 		},

src/views/widgets/TakenWidget.vue

@@ -34,6 +34,7 @@ import { taakStore, navigationStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 import TakenForm from '../../modals/taken/EditTaak.vue'
@@ -75,12 +76,16 @@ export default {
 						id: taak.id,
 						mainText: taak.title,
 						subText: taak.type,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/calendar-month-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/calendar-month-outline.svg'
+		},
 		openModal() {
 			this.isModalOpen = true
 			taakStore.setTaakItem(null)

src/views/widgets/ZakenWidget.vue

@@ -30,6 +30,7 @@ import { zaakStore } from '../../store/store.js'
 <script>
 // Components
 import { NcDashboardWidget, NcEmptyContent, NcButton } from '@nextcloud/vue'
+import { getTheme } from '../../services/getTheme.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Folder from 'vue-material-design-icons/Folder.vue'
 
@@ -70,12 +71,16 @@ export default {
 						id: zaak.id,
 						mainText: zaak.identificatie,
 						subText: zaak.zaaktype,
-						avatarUrl: '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg',
+						avatarUrl: this.getItemIcon(),
 					}))
 
 					this.loading = false
 				})
 		},
+		getItemIcon() {
+			const theme = getTheme()
+			return theme === 'light' ? '/apps-extra/zaakafhandelapp/img/briefcase-account-outline-dark.svg' : '/apps-extra/zaakafhandelapp/img/briefcase-account-outline.svg'
+		},
 		search() {
 			console.info('click')
 		},