Skip to content

Commit

Permalink
fix: Icon color att app files
Browse files Browse the repository at this point in the history
Signed-off-by: Vitor Mattos <vitor@php.rio>
  • Loading branch information
vitormattos authored and backportbot-libresign[bot] committed Nov 26, 2024
1 parent a7c9b5d commit b95ad0b
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 9 deletions.
53 changes: 45 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
40 changes: 40 additions & 0 deletions src/helpers/useIsDarkTheme.js
Original file line number Diff line number Diff line change
@@ -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())
4 changes: 3 additions & 1 deletion src/init.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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() {
Expand Down
24 changes: 24 additions & 0 deletions src/utils/isDarkTheme.js
Original file line number Diff line number Diff line change
@@ -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
}

0 comments on commit b95ad0b

Please sign in to comment.