Description

I propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.

Example

The Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).

Before:

<UForm ...>
     <UFormField ... class="flex max-sm:flex-col justify-between items-center gap-4">
            ...
     <UFormField>
     <UFormField ... class="flex max-sm:flex-col justify-between items-center gap-4">
            ...
     <UFormField>
<UForm/>

After:

<!-- `ui` prop is the same as `app.config.ts` theming config
<UTheme :ui="{
     formField: {
	 slots: {
	     root: "flex max-sm:flex-col justify-between items-center gap-4",
	},
    },
}">
   <UForm ...>
       <UFormField ...>
              ...
       <UFormField>
       <UFormField ...>
              ...
       <UFormField>
   <UForm/>
</UTheme>

Benefits

• Easily componentized. I could create a AppForm component which contains the UTheme usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.
• Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one

Implementation

I'd tentatively be willing to implement this. My approach would be:

• Create UTheme, it should have a ui and uiPro prop, each of which take the same type as the app.config.ts
• provide() those props
• inject() those props into each component and merge with passed in ui field.
• Theme priority order should be:
  1. ui prop passed to component
  2. ui prop coming from UTheme component
  3. ui config coming from app.config.ts

Additional context

No response