@nextcloud/vue/dist/Functions/isDarkTheme.mjs.map

Nextcloud vue components

{"version":3,"file":"isDarkTheme.mjs","sources":["../../src/functions/isDarkTheme/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n/**\n * Check whether the dark theme is used on a specific element\n *\n * @param el - Element to check for dark theme, which is used for `data-theme-*` checking (default is `document.body`)\n * @return - Whether the dark theme is enabled via Nextcloud theme\n */\nexport function checkIfDarkTheme(el: HTMLElement = document.body): boolean {\n\t// Nextcloud uses --background-invert-if-dark for dark theme filters in CSS\n\t// Values:\n\t// - 'invert(100%)' for dark theme\n\t// - 'no' for light theme\n\t// This is the most reliable way to check for dark theme, including custom themes\n\tconst backgroundInvertIfDark = window.getComputedStyle(el).getPropertyValue('--background-invert-if-dark')\n\tif (backgroundInvertIfDark !== undefined) {\n\t\treturn backgroundInvertIfDark === 'invert(100%)'\n\t}\n\n\t// There is no theme? Fallback to the light theme\n\treturn false\n}\n\n/**\n * Whether the dark theme is enabled in Nextcloud.\n * The variable is defined on page load and not reactive.\n * Use `checkIfDarkTheme` if you need to check it at a specific moment.\n * Use `useDarkTheme` if you need a reactive variable in a Vue component.\n */\nexport const isDarkTheme = checkIfDarkTheme()\n"],"names":[],"mappings":"AAWO,SAAS,iBAAiB,KAAkB,SAAS,MAAe;AAM1E,QAAM,yBAAyB,OAAO,iBAAiB,EAAE,EAAE,iBAAiB,6BAA6B;AACzG,MAAI,2BAA2B,QAAW;AACzC,WAAO,2BAA2B;AAAA,EACnC;AAGA,SAAO;AACR;AAQO,MAAM,cAAc,iBAAA;"}