{"version":3,"file":"NcThemeProvider-BqGPTeWg.cjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup>\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps({\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":["computed","provide","INJECTION_KEY_THEME"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2IA,UAAM,QAAQA,IAAAA,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACR,WAAW,MAAM,OAAO;AACvB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;AACDC,QAAAA,QAAQC,UAAAA,qBAAqB,KAAK;;;;;;;;;;;;;;;;;;;"}