From 20dafe109e3895885b0dd2c81f00bd3f107b2c5c Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Sat, 16 Nov 2024 20:07:39 +0100 Subject: fix: use useDarkTheme from nextcloud/vue library Signed-off-by: Maksim Sukharev --- src/components/AvatarWrapper/AvatarWrapper.vue | 2 +- src/components/ConversationIcon.vue | 2 +- .../ConversationAvatarEditor.vue | 2 +- .../MessagesGroup/Message/MessagePart/Mention.vue | 2 +- .../NewMessage/NewMessageAbsenceInfo.vue | 2 +- src/composables/useChatMentions.ts | 3 +- src/composables/useIsDarkTheme.ts | 41 ---------------------- src/utils/isDarkTheme.ts | 24 ------------- 8 files changed, 7 insertions(+), 71 deletions(-) delete mode 100644 src/composables/useIsDarkTheme.ts delete mode 100644 src/utils/isDarkTheme.ts 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>} - computed boolean whether the dark theme is enabled - */ -export function useIsDarkThemeElement(el: HTMLElement = document.body): DeepReadonly> { - 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>} - 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 -} -- cgit v1.2.3