Skip to content

[Feature Request] Convert Vuetify to use @vuetify/0 useTheme #108

@johnleider

Description

@johnleider

Summary

Convert Vuetify 3 to use @vuetify/v0 useTheme.

Research Findings

Breaking Changes Required

  1. Remove monolithic style generation - Delegate to adapter
  2. Remove hardcoded DOM access - Use adapter interface
  3. Replace color utilities - Use adapter for genOnColors(), genVariations()
  4. Remove system theme logic - Add as adapter feature or separate composable
  5. API change: change(name)select(id)
  6. Remove makeThemeProps() - v0 uses composition, not props
  7. Class calculation: v3 class="v-theme--${name}" → v0 data-theme="${id}"
  8. Options restructure: v0 { default, themes, palette } vs v3 { defaultTheme, themes, variations }

Recommended Approach

Create Vuetify3ThemeAdapter that provides:

  • genOnColors() for auto foreground colors
  • genVariations() for lighten/darken
  • System theme detection
  • Utility CSS class generation
  • CSS layers support
  • Scoping support

Migration Path

  1. v0 adds missing features (see [Feature Request] useTheme - ensure parity with Vuetify createTheme #103)
  2. Create Vuetify3ThemeAdapter extending ThemeAdapter
  3. Vuetify 3 uses v0 with custom adapter
  4. Gradual migration of component theme props

Dependencies

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions