-
-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Vitor Mattos <vitor@php.rio>
- Loading branch information
1 parent
a7c9b5d
commit b95ad0b
Showing
5 changed files
with
113 additions
and
9 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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()) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} |