From ce3ce40efd0a78de0f864f2e7a2cef2594b915f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Tue, 25 Mar 2025 17:27:37 +0100 Subject: [PATCH 1/2] feat: use `nextcloud-theme-dark` var for dark theme computation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- src/functions/isDarkTheme/index.ts | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/functions/isDarkTheme/index.ts b/src/functions/isDarkTheme/index.ts index 7d176b9486..591a8593a7 100644 --- a/src/functions/isDarkTheme/index.ts +++ b/src/functions/isDarkTheme/index.ts @@ -9,18 +9,21 @@ * @return {boolean} - Whether the dark theme is enabled via Nextcloud theme */ export function checkIfDarkTheme(el: HTMLElement = document.body): boolean { - // 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%)' + // Check if the new clean nextcloud-theme-dark variable is set + const isNextcloudThemeDark = window.getComputedStyle(el).getPropertyValue('--nextcloud-theme-dark') + if (isNextcloudThemeDark !== undefined) { + return isNextcloudThemeDark === '1' } - // There is no theme? Fallback to the light theme - return false + // Else we check the old ways + // 1. first priority is the data-theme-dark attribute on a parent element + // 2. second priority is the data-themes attribute on the body, aka the user setting + // 3. third priority is the system preference + // 4. lastly is the default light theme + const darkModeSystemPreference = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches + const darkModeAccountSetting = document.body.getAttribute('data-themes')?.includes('dark') + const darkModeElementOverride = el.closest('[data-theme-dark]') !== null + return darkModeElementOverride || darkModeAccountSetting || darkModeSystemPreference || false } /** From 97304733eaa52cc003af91a623f23b88d83210d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6?= Date: Tue, 29 Jul 2025 12:40:21 +0200 Subject: [PATCH 2/2] chore: cleaner code syntax MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Grigorii K. Shartsev Signed-off-by: John Molakvoæ --- src/functions/isDarkTheme/index.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/functions/isDarkTheme/index.ts b/src/functions/isDarkTheme/index.ts index 591a8593a7..224c871671 100644 --- a/src/functions/isDarkTheme/index.ts +++ b/src/functions/isDarkTheme/index.ts @@ -20,10 +20,19 @@ export function checkIfDarkTheme(el: HTMLElement = document.body): boolean { // 2. second priority is the data-themes attribute on the body, aka the user setting // 3. third priority is the system preference // 4. lastly is the default light theme - const darkModeSystemPreference = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches - const darkModeAccountSetting = document.body.getAttribute('data-themes')?.includes('dark') - const darkModeElementOverride = el.closest('[data-theme-dark]') !== null - return darkModeElementOverride || darkModeAccountSetting || darkModeSystemPreference || false + if (el.closest('[data-theme-dark]') !== null) { + return true + } + + if (document.body.getAttribute('data-themes')?.includes('dark')) { + return true + } + + if (window.matchMedia('(prefers-color-scheme: dark)')?.matches) { + return true + } + + return false } /**