fix: use useDarkTheme from nextcloud/vue library

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

8 files changed, 7 insertions, 71 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 74675c928c..c013f599fd 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -51,8 +51,8 @@ import { t } from '@nextcloud/l10n'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
 
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { ATTENDEE, AVATAR } from '../../constants.js'
 import { getUserProxyAvatarOcsUrl } from '../../services/avatarService.ts'
 
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index aaf11831c1..fdf47093a9 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -60,8 +60,8 @@ import WebIcon from 'vue-material-design-icons/Web.vue'
 import { t } from '@nextcloud/l10n'
 
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
 
-import { useIsDarkTheme } from '../composables/useIsDarkTheme.ts'
 import { AVATAR, CONVERSATION } from '../constants.js'
 import { getConversationAvatarOcsUrl } from '../services/avatarService.ts'
 import { hasTalkFeature } from '../services/CapabilitiesManager.ts'
diff --git a/src/components/ConversationSettings/ConversationAvatarEditor.vue b/src/components/ConversationSettings/ConversationAvatarEditor.vue
index f7f1624592..73195f82db 100644
--- a/src/components/ConversationSettings/ConversationAvatarEditor.vue
+++ b/src/components/ConversationSettings/ConversationAvatarEditor.vue
@@ -121,10 +121,10 @@ import { generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
 
 import ConversationIcon from '../ConversationIcon.vue'
 
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { AVATAR } from '../../constants.js'
 
 // eslint-disable-next-line n/no-extraneous-import
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 3774dbfe62..a67292531b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -19,8 +19,8 @@
 import { loadState } from '@nextcloud/initial-state'
 
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
 
-import { useIsDarkTheme } from '../../../../../composables/useIsDarkTheme.ts'
 import { getConversationAvatarOcsUrl, getUserProxyAvatarOcsUrl } from '../../../../../services/avatarService.ts'
 
 export default {
diff --git a/src/components/NewMessage/NewMessageAbsenceInfo.vue b/src/components/NewMessage/NewMessageAbsenceInfo.vue
index 2ca64a2c1b..5c74c41818 100644
--- a/src/components/NewMessage/NewMessageAbsenceInfo.vue
+++ b/src/components/NewMessage/NewMessageAbsenceInfo.vue
@@ -46,10 +46,10 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme.ts'
 import { AVATAR } from '../../constants.js'
 
 export default {
diff --git a/src/composables/useChatMentions.ts b/src/composables/useChatMentions.ts
index bbc706b93d..37a6394f75 100644
--- a/src/composables/useChatMentions.ts
+++ b/src/composables/useChatMentions.ts
@@ -10,7 +10,8 @@ import Vue, { computed, ref } from 'vue'
 import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 
-import { useIsDarkTheme } from './useIsDarkTheme.ts'
+import { useIsDarkTheme } from '@nextcloud/vue/dist/Composables/useIsDarkTheme.js'
+
 import { ATTENDEE } from '../constants.js'
 import { getConversationAvatarOcsUrl, getUserProxyAvatarOcsUrl } from '../services/avatarService.ts'
 import { searchPossibleMentions } from '../services/mentionsService.ts'
diff --git a/src/composables/useIsDarkTheme.ts b/src/composables/useIsDarkTheme.ts
deleted file mode 100644
index 0a348e3a9f..0000000000
--- a/src/composables/useIsDarkTheme.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { createSharedComposable, useMutationObserver, usePreferredDark } from '@vueuse/core'
-import { readonly, ref, watch } from 'vue'
-import type { Ref, DeepReadonly } from 'vue'
-
-import { checkIfDarkTheme } from '../utils/isDarkTheme.ts'
-
-/**
- * Check whether the dark theme is enabled on a specific element.
- * If you need to check an entire page, use `useIsDarkTheme` instead.
- * Reacts on element attributes changes and system theme changes.
- * @param el - The element to check for the dark theme enabled on
- * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
- */
-export function useIsDarkThemeElement(el: HTMLElement = document.body): DeepReadonly<Ref<boolean>> {
-	const isDarkTheme = ref(checkIfDarkTheme(el))
-	const isDarkSystemTheme = usePreferredDark()
-
-	/** Update the isDarkTheme */
-	function updateIsDarkTheme() {
-		isDarkTheme.value = checkIfDarkTheme(el)
-	}
-
-	// Watch for element changes to handle data-theme* attributes change
-	useMutationObserver(el, updateIsDarkTheme, { attributes: true })
-	// Watch for system theme changes for the default theme
-	watch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })
-
-	return readonly(isDarkTheme)
-}
-
-/**
- * Shared composable to check whether the dark theme is enabled on the page.
- * Reacts on body data-theme-* attributes changes and system theme changes.
- * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
- */
-export const useIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())
diff --git a/src/utils/isDarkTheme.ts b/src/utils/isDarkTheme.ts
deleted file mode 100644
index 555a785aa7..0000000000
--- a/src/utils/isDarkTheme.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Check if dark theme is used on a specific element
- * @param el - Element to check for dark theme, default is document.body, which is used for data-theme-* settings
- * @return {boolean} - Whether the dark theme is enabled via Nextcloud theme
- */
-export function checkIfDarkTheme(el: HTMLElement = document.body): boolean {
-	// Nextcloud uses --background-invert-if-dark for dark theme filters in CSS
-	// Values:
-	// - 'invert(100%)' for dark theme
-	// - 'no' for light theme
-	// This is the most reliable way to check for dark theme, including custom themes
-	const backgroundInvertIfDark = window.getComputedStyle(el).getPropertyValue('--background-invert-if-dark')
-	if (backgroundInvertIfDark !== undefined) {
-		return backgroundInvertIfDark === 'invert(100%)'
-	}
-
-	// There is no theme? Fallback to the light theme
-	return false
-}