refactor(frontend): add isDarkTheme util

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

3 files changed, 45 insertions, 6 deletions

diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index 8e400f3fd..f85bb27f1 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -65,6 +65,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import { CONVERSATION } from '../constants.js'
+import { isDarkTheme } from '../utils/isDarkTheme.js'
 
 const supportsAvatar = getCapabilities()?.spreed?.features?.includes('avatar')
 
@@ -220,9 +221,7 @@ export default {
 				return undefined
 			}
 
-			const darkTheme = window.getComputedStyle(document.body)
-				.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
-			const avatarEndpoint = 'apps/spreed/api/v1/room/{token}/avatar' + (darkTheme ? '/dark' : '')
+			const avatarEndpoint = 'apps/spreed/api/v1/room/{token}/avatar' + (isDarkTheme ? '/dark' : '')
 
 			return generateOcsUrl(avatarEndpoint + '?v={avatarVersion}', {
 				token: this.item.token,
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index 6e80bc4dd..88ea411c0 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -186,6 +186,7 @@ import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
+import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
 const picker = getFilePickerBuilder(t('spreed', 'File to share'))
 	.setMultiSelect(false)
@@ -724,9 +725,7 @@ export default {
 				// Set icon for candidate mentions that are not for users.
 				if (possibleMention.source === 'calls') {
 					possibleMention.icon = 'icon-user-forced-white'
-					const darkTheme = window.getComputedStyle(document.body)
-						.getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
-					possibleMention.iconUrl = generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar' + (darkTheme ? '/dark' : ''), {
+					possibleMention.iconUrl = generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar' + (isDarkTheme ? '/dark' : ''), {
 						token: this.token,
 					})
 					possibleMention.subline = t('spreed', 'Everyone')
diff --git a/src/utils/isDarkTheme.js b/src/utils/isDarkTheme.js
new file mode 100644
index 000000000..7706bdada
--- /dev/null
+++ b/src/utils/isDarkTheme.js
@@ -0,0 +1,41 @@
+/*
+ * @copyright Copyright (c) 2023 Grigorii Shartsev <me@shgk.me>
+ *
+ * @author Grigorii Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Check if dark theme is used
+ *
+ * @return {boolean}
+ */
+function checkIfDarkTheme() {
+	// Nextcloud uses --background-invert-if-dark for dark theme filters in CSS
+	// Values:
+	// - 'invert(100%)' for dark theme
+	// - 'no' for light theme
+	return window.getComputedStyle(document.body).getPropertyValue('--background-invert-if-dark') === 'invert(100%)'
+}
+
+/**
+ * Is Dark Theme enabled
+ * We do not support dark/light theme update without reload the page, so the value can be computed once
+ *
+ * @type {boolean}
+ */
+export const isDarkTheme = checkIfDarkTheme()