refactor(NcThemeProvider): adjust code style

Co-authored-by: Grigorii K. Shartsev <me@shgk.me>
Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcThemeProvider/NcThemeProvider.vue

@@ -112,11 +112,12 @@ legend {
 	min-height: 2lh;
 }
 </style>
+```
 </docs>
 
 <script setup lang="ts">
 import { computed, provide } from 'vue'
-import { KEY_ENFORCE_THEME } from '../../composables/useIsDarkTheme/index.ts'
+import { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/index.ts'
 
 const props = defineProps<{
 	/**
@@ -138,18 +139,11 @@ const theme = computed(() => {
 	}
 	return ''
 })
-provide(KEY_ENFORCE_THEME, theme)
-
-const dataTheme = computed(() => {
-	if (theme.value) {
-		return { [`data-theme-${theme.value}`]: true }
-	}
-	return {}
-})
+provide(INJECTION_KEY_THEME, theme)
 </script>
 
 <template>
-	<div v-bind="dataTheme">
+	<div :[`data-theme-${theme}`]="theme">
 		<slot />
 	</div>
 </template>

src/composables/useIsDarkTheme/index.ts

@@ -3,17 +3,16 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import type { ComputedRef, DeepReadonly, Ref } from 'vue'
+import type { ComputedRef, DeepReadonly, InjectionKey, Ref } from 'vue'
 
 import { createSharedComposable, usePreferredDark, useMutationObserver } from '@vueuse/core'
 import { ref, readonly, watch, inject, computed } from 'vue'
 import { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'
 
 /**
- * Symbol used to provide the enforced dark / light theme state.
- * Injected by `NcThemeProvider`.
+ * Enforced dark / light theme state
  */
-export const KEY_ENFORCE_THEME = Symbol('enforce-theme')
+export const INJECTION_KEY_THEME: InjectionKey<ComputedRef<'light' | 'dark' | ''>> = Symbol.for('nc:theme:enforced')
 
 /**
  * Check whether the dark theme is enabled on a specific element.
@@ -55,7 +54,7 @@ const useInternalIsDarkTheme = createSharedComposable(() => useIsDarkThemeElemen
  */
 export function useIsDarkTheme(): DeepReadonly<Ref<boolean>> {
 	const isDarkTheme = useInternalIsDarkTheme()
-	const enforcedTheme = inject<ComputedRef<string>>(KEY_ENFORCE_THEME)
+	const enforcedTheme = inject(INJECTION_KEY_THEME)
 
 	return computed(() => {
 		if (enforcedTheme?.value) {