mirror of
https://github.com/LibreSign/libresign.git
synced 2025-12-18 05:20:45 +01:00
fix: Icon color att app files
Signed-off-by: Vitor Mattos <vitor@php.rio>
This commit is contained in:
Vitor Mattos
parent
d483ceb0bc
commit
a20a7d0797
5 changed files with 113 additions and 9 deletions
53
package-lock.json
generated
53
package-lock.json
generated
|
|
@ -28,6 +28,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",
|
||||
|
|
@ -4593,6 +4594,30 @@
|
|||
"vue-demi": ">=0.14.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/@vueuse/core": {
|
||||
"version": "11.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.2.0.tgz",
|
||||
"integrity": "sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "11.2.0",
|
||||
"@vueuse/shared": "11.2.0",
|
||||
"vue-demi": ">=0.14.10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
|
||||
"version": "11.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.2.0.tgz",
|
||||
"integrity": "sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/components/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
|
|
@ -4620,14 +4645,26 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "11.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.2.0.tgz",
|
||||
"integrity": "sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==",
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
|
||||
"integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "11.2.0",
|
||||
"@vueuse/shared": "11.2.0",
|
||||
"@vueuse/metadata": "11.3.0",
|
||||
"@vueuse/shared": "11.3.0",
|
||||
"vue-demi": ">=0.14.10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core/node_modules/@vueuse/shared": {
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
|
||||
"integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": ">=0.14.10"
|
||||
},
|
||||
"funding": {
|
||||
|
|
@ -4661,9 +4698,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@vueuse/metadata": {
|
||||
"version": "11.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.2.0.tgz",
|
||||
"integrity": "sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==",
|
||||
"version": "11.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
|
||||
"integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
40
src/helpers/useIsDarkTheme.js
Normal file
40
src/helpers/useIsDarkTheme.js
Normal file
|
|
@ -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())
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
24
src/utils/isDarkTheme.js
Normal file
24
src/utils/isDarkTheme.js
Normal file
|
|
@ -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
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue