@nextcloud/vue/dist/Composables/useIsDarkTheme.mjs.map

Nextcloud vue components

{"version":3,"file":"useIsDarkTheme.mjs","sources":["../../src/composables/useIsDarkTheme/index.ts"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { MaybeRefOrGetter } from '@vueuse/core'\nimport type { DeepReadonly, Ref } from 'vue'\n\nimport { createSharedComposable, toValue, useMutationObserver, usePreferredDark } from '@vueuse/core'\nimport { computed, inject, readonly, ref, watch } from 'vue'\nimport { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'\nimport { INJECTION_KEY_THEME } from './constants.ts'\n\n/**\n * Check whether the dark theme is enabled on a specific element.\n * If you need to check an entire page, use `useIsDarkTheme` instead for better performance.\n * Reacts on element attributes change and system theme change.\n *\n * @param el - The element to check for the dark theme enabled on (default is `document.body`)\n * @return - computed boolean whether the dark theme is enabled\n */\nexport function useIsDarkThemeElement(el?: MaybeRefOrGetter<HTMLElement>): DeepReadonly<Ref<boolean>> {\n\tconst element = computed(() => toValue(el) ?? document.body)\n\n\tconst isDarkTheme = ref(checkIfDarkTheme(element.value))\n\tconst isDarkSystemTheme = usePreferredDark()\n\n\t/** Update the isDarkTheme */\n\tfunction updateIsDarkTheme() {\n\t\tisDarkTheme.value = checkIfDarkTheme(element.value)\n\t}\n\n\t// Watch for element change to handle data-theme* attributes change\n\tuseMutationObserver(element, updateIsDarkTheme, { attributes: true })\n\t// Watch for ref changes\n\twatch(element, updateIsDarkTheme)\n\t// Watch for system theme change for the default theme\n\twatch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })\n\n\treturn readonly(isDarkTheme)\n}\n\n/**\n * The real shared composable of the dark theme state.\n * We need to wrap this to allow to react to injected theme changes.\n */\nconst useInternalIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())\n\n/**\n * Shared composable to check whether the dark theme is enabled on the page.\n *\n * Reacts on body data-theme-* attributes change and system theme change.\n * As well as any enforced theme by the `NcThemeProvider`.\n *\n * @return Computed boolean whether the dark theme is enabled\n */\nexport function useIsDarkTheme(): DeepReadonly<Ref<boolean>> {\n\tconst isDarkTheme = useInternalIsDarkTheme()\n\tconst enforcedTheme = inject(INJECTION_KEY_THEME, undefined)\n\n\treturn computed(() => {\n\t\tif (enforcedTheme?.value) {\n\t\t\treturn enforcedTheme.value === 'dark'\n\t\t}\n\t\treturn isDarkTheme.value\n\t})\n}\n"],"names":[],"mappings":";;;;AAAA;AAAA;AAAA;AAAA;AAqBO,SAAS,sBAAsB,IAAgE;AACrG,QAAM,UAAU,SAAS,MAAM,QAAQ,EAAE,KAAK,SAAS,IAAI;AAE3D,QAAM,cAAc,IAAI,iBAAiB,QAAQ,KAAK,CAAC;AACvD,QAAM,oBAAoB,iBAAA;AAG1B,WAAS,oBAAoB;AAC5B,gBAAY,QAAQ,iBAAiB,QAAQ,KAAK;AAAA,EACnD;AAGA,sBAAoB,SAAS,mBAAmB,EAAE,YAAY,MAAM;AAEpE,QAAM,SAAS,iBAAiB;AAEhC,QAAM,mBAAmB,mBAAmB,EAAE,WAAW,MAAM;AAE/D,SAAO,SAAS,WAAW;AAC5B;AAMA,MAAM,yBAAyB,uBAAuB,MAAM,uBAAuB;AAU5E,SAAS,iBAA6C;AAC5D,QAAM,cAAc,uBAAA;AACpB,QAAM,gBAAgB,OAAO,qBAAqB,MAAS;AAE3D,SAAO,SAAS,MAAM;AACrB,QAAI,eAAe,OAAO;AACzB,aAAO,cAAc,UAAU;AAAA,IAChC;AACA,WAAO,YAAY;AAAA,EACpB,CAAC;AACF;"}