Skip to content

use/useTheme

Overview

Resolves and caches component theme classes by merging the default theme with 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 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:33

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

getTheme

mergeTheme

patchTheme

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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2