Merge pull request #4058 from LibreSign/backport/4052/stable30

[stable30] fix: Icon color att app files

package.json

@@ -39,6 +39,7 @@
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/upload": "^1.7.0",
     "@nextcloud/vue": "^8.21.0",
+    "@vueuse/core": "^11.3.0",
     "blueimp-md5": "^2.19.0",
     "copy-webpack-plugin": "^12.0.2",
     "crypto-js": "^4.2.0",

src/helpers/useIsDarkTheme.js

@@ -0,0 +1,40 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { createSharedComposable, useMutationObserver, usePreferredDark } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+import { checkIfDarkTheme } from '../utils/isDarkTheme.js'
+
+/**
+ * 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 {HTMLElement} el - The element to check for the dark theme enabled on
+ * @return {boolean} - computed boolean whether the dark theme is enabled
+ */
+export function useIsDarkThemeElement(el = document.body) {
+	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 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 {boolean} - computed boolean whether the dark theme is enabled
+ */
+export const useIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())

src/init.js

@@ -13,6 +13,8 @@ import { getUploader } from '@nextcloud/upload'
 
 import logger from './logger.js'
 import LibreSignLogoSvg from '../img/app-colored.svg?raw'
+import LibreSignLogoDarkSvg from '../img/app-dark.svg?raw'
+import { useIsDarkTheme } from './helpers/useIsDarkTheme.js'
 
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
@@ -22,7 +24,7 @@ Vue.prototype.OCA = OCA
 addNewFileMenuEntry({
 	id: 'libresign-request',
 	displayName: t('libresign', 'New signature request'),
-	iconSvgInline: LibreSignLogoSvg,
+	iconSvgInline: useIsDarkTheme() ? LibreSignLogoDarkSvg : LibreSignLogoSvg,
 	uploadManager: getUploader(),
 	order: 1,
 	enabled() {

src/utils/isDarkTheme.js

@@ -0,0 +1,24 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Check if dark theme is used on a specific element
+ * @param {HTMLElement} 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 = document.body) {
+	// 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
+}