@datametria/vue-components/src/theme/useTheme.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

/**
 * useTheme Composable
 * @author Vander Loto - CTO DATAMETRIA
 * @date 13/11/2025
 */

import { inject } from 'vue'
import type { ComputedRef } from 'vue'
import type { Theme } from './types'
import { THEME_INJECTION_KEY } from './constants'

/**
 * Access the current theme from ThemeProvider
 * @throws Error if used outside ThemeProvider
 * @returns Current theme object (reactive)
 */
export function useTheme(): ComputedRef<Theme> {
  const themeRef = inject<ComputedRef<Theme>>(THEME_INJECTION_KEY)

  if (!themeRef) {
    throw new Error(
      'useTheme must be used within a ThemeProvider. ' +
      'Wrap your component tree with <ThemeProvider :theme="yourTheme">'
    )
  }

  return themeRef
}