refactor: migrate theme system to @vuetify/v0#22765
refactor: migrate theme system to @vuetify/v0#22765johnleider wants to merge 12 commits intonextfrom
Conversation
- createTheme() now creates a v0 theme instance for theme selection, cycling, and dark mode detection via usePrefersDark() - Bridge v0's selectedId to Vuetify's writable name computed - System theme detection delegated to v0's usePrefersDark() - Preserve full consumer API: name, current, themes, computedThemes, themeClasses, styles, change/cycle/toggle, install, global - Fix adapter.ts ThemeAdapter import path (@vuetify/v0/theme/adapters) - Fix adapter.ts ThemeAdapterSetupContext type (inline, not exported) - Keep original CSS generation and DOM injection in install() for backward compatibility with head/unhead integration
johnleider
force-pushed
the
feat/v0-theme-integration
branch
from
52d79d9 to
4767f5c
Compare
|
while verifying this demo locally, I noticed I personally don't like it - given it is attached to a simple dual-state button, it feels broken 1/3 of the times user clicks. It can also result in missing colors ( PR description needs a quick human check. I don't think this point applies
|
J-Sek
left a comment
J-Sek
left a comment
There was a problem hiding this comment.
- PR description needs to be reflect intended changes to avoid confusing devs
current.darkwith system theme - breaking change needs fix or better calloutcycle()- (without arguments) breaking change needs fix or better callout- (nice to have) some hint on what "adapter" might enable... quick info in
features/theme.md
johnleider
force-pushed
the
feat/v0-theme-integration
branch
from
59852b0 to
4767f5c
Compare
| - ['2023-09-28', '2023-09-29', '2023-09-30', '2023-10-01', '2023-10-02'] | ||
| + ['2023-09-28', '2023-10-02'] | ||
| - theme.themes.value.custom = { dark: true, colors: { primary: '#ff5722' } } | ||
| + theme.register({ id: 'custom', dark: true, colors: { primary: '#ff5722' } }) |
There was a problem hiding this comment.
useTheme does not expose register yet
There was a problem hiding this comment.
I assume this surgically adds specific fields to the theme. Let's say one piece of code sets primary, another one picks surface color - they should not interfere.. My previous demo does not work yet, so I am speculating.
| ``` | ||
|
|
||
| ### VFileInput | ||
| Mutating existing theme colors continues to work: |
| return '@layer vuetify-utilities {\n' + lines.map(v => ` ${v}`).join('') + '\n}' | ||
| } | ||
|
|
||
| // @ts-expect-error Vue types mismatch between v0 and vuetify packages |
There was a problem hiding this comment.
So fix the types mismatch? Why is this even a generic function? If v0 defined it as context: ThemeAdapterSetupContext you wouldn't have to do anything and it could just inherit from ThemeAdapter.setup.
| Several properties have been removed from the `ThemeInstance` type: | ||
|
|
||
| - `styles` — CSS injection is now handled internally by the theme adapter | ||
| - `isDisabled` — themes are always enabled |
There was a problem hiding this comment.
isDisabled still exists in parsedOptions but isn't exposed in ThemeInstance because...?
| readonly global: { | ||
| readonly name: Ref<string> | ||
| readonly current: DeepReadonly<Ref<InternalThemeDefinition>> | ||
| } |
There was a problem hiding this comment.
This removal is missing from the upgrade guide.
Without global it is not possible to read or modify the application theme from within a theme provider.
3 participants
Summary
@vuetify/v0'screateTheme()for theme selection,isDarkstate, and reactive registryVuetifyThemeAdapterfor Vuetify-specific CSS generation (.v-theme--*selectors, utility classes,@layer, variables, overlay multipliers)theme/colors.tsusePrefersDark()useTheme,provideTheme,makeThemeProps,ThemeSymbol) fully preserved — 50+ components unchangedBreaking Changes
ThemeInstance.stylesref removed — CSS injection handled by adapterThemeInstance.isDisabledremoved — themes always enabledThemeInstance.isSystemremoved — checkname.value === 'system'register()instead ofthemes.value.custom = { ... }Test plan
pnpm build:lib— 554 files compiledpnpm lint— tsc + eslint cleanpnpm test:unit -- --run— 661 passed (4 pre-existing date.spec.ts failures)