Skip to content

use/useTheme ​

Overview ​

Resolves and caches component theme classes from the base theme, project overrides, and inherited and local overrides.

Slot entries may declare composes: ['_MetaKey.slot', ...] to compose classes from other entries before their own classes. Underscore-prefixed entries (_ButtonBase, _ButtonGhost, etc.) are the convention for shared scaffolding consumed by visually-related leaf components. Composition is resolved at lookup time against the merged override theme, so setTheme, overrideTheme, or useThemeOverride on a meta key propagates to every leaf that composes from it. Override semantics for composes are replace (override list wins entirely); own class values still combine default + override as in non-composing entries.

Properties ​

THEME_OVERRIDE_PROPS ​

Vue component props definition for components that accept a theme override prop. Spread into component options to allow callers to supply a partial theme object that is merged with the component's default theme.

@vueda-spread props

Type: object

Source: client/lib/use/useTheme.js:43

Methods ​

  • useTheme - A hook to get the classes for a given key and kwargs.
  • useThemeOverride - Merge a theme object with another theme object and provide the result for child components.

Types ​

clearThemeOverrides ​

getTheme ​

mergeTheme ​

overrideTheme ​

patchTheme ​

setClassMerger ​

setTheme ​

CombinedClassesArgument ​

CombinedClassesArgument = string | string[] | string[][] | object | Ref | Ref | UnwrapNestedRefs

ComponentTheme ​

ComponentTheme = object

ThemeObject ​

ThemeObject = object

ThemeProps ​

ThemeProps = UnwrapNestedRefs | ComputedRef

ThemeRawProps ​

NameTypeDescription
themeOverrideThemeObject

UseThemeReturnFunction ​

UseThemeReturnFunction = (key: string, kwargs: UnwrapNestedRefs) => string & object

Source ​

client/lib/use/useTheme.js:1