@vuetify/nightly 3.8.1-dev.2025-04-07 → 3.8.1-dev.2025-04-12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -132,11 +132,12 @@ type DeepPartial<T> = T extends object ? {
132
132
  } : T;
133
133
  type ThemeOptions = false | {
134
134
  cspNonce?: string;
135
- defaultTheme?: string;
135
+ defaultTheme?: 'light' | 'dark' | 'system' | string;
136
136
  variations?: false | VariationsOptions;
137
137
  themes?: Record<string, ThemeDefinition>;
138
138
  stylesheetId?: string;
139
139
  scope?: string;
140
+ unimportant?: boolean;
140
141
  };
141
142
  type ThemeDefinition = DeepPartial<InternalThemeDefinition>;
142
143
  interface VariationsOptions {
@@ -173,11 +174,15 @@ interface OnColors {
173
174
  'on-info': string;
174
175
  }
175
176
  interface ThemeInstance {
177
+ change: (themeName: string) => void;
178
+ cycle: (themeArray?: string[]) => void;
179
+ toggle: (themeArray?: [string, string]) => void;
176
180
  readonly isDisabled: boolean;
177
181
  readonly themes: Ref<Record<string, InternalThemeDefinition>>;
178
182
  readonly name: Readonly<Ref<string>>;
179
183
  readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
180
184
  readonly computedThemes: DeepReadonly<Ref<Record<string, InternalThemeDefinition>>>;
185
+ readonly prefix: string;
181
186
  readonly themeClasses: Readonly<Ref<string | undefined>>;
182
187
  readonly styles: Readonly<Ref<string>>;
183
188
  readonly global: {
@@ -96780,40 +96785,43 @@ declare module 'vue' {
96780
96785
  $children?: VNodeChild
96781
96786
  }
96782
96787
  export interface GlobalComponents {
96788
+ VAlert: VAlert
96789
+ VAlertTitle: VAlertTitle
96783
96790
  VApp: VApp
96791
+ VAutocomplete: VAutocomplete
96784
96792
  VAppBar: VAppBar
96785
96793
  VAppBarNavIcon: VAppBarNavIcon
96786
96794
  VAppBarTitle: VAppBarTitle
96787
- VAvatar: VAvatar
96788
- VAlert: VAlert
96789
- VAlertTitle: VAlertTitle
96790
- VAutocomplete: VAutocomplete
96791
96795
  VBadge: VBadge
96796
+ VAvatar: VAvatar
96792
96797
  VBanner: VBanner
96793
96798
  VBannerActions: VBannerActions
96794
96799
  VBannerText: VBannerText
96800
+ VBtn: VBtn
96801
+ VBtnGroup: VBtnGroup
96802
+ VBtnToggle: VBtnToggle
96803
+ VBottomNavigation: VBottomNavigation
96795
96804
  VBreadcrumbs: VBreadcrumbs
96796
96805
  VBreadcrumbsItem: VBreadcrumbsItem
96797
96806
  VBreadcrumbsDivider: VBreadcrumbsDivider
96807
+ VChip: VChip
96808
+ VCarousel: VCarousel
96809
+ VCarouselItem: VCarouselItem
96798
96810
  VBottomSheet: VBottomSheet
96799
- VBottomNavigation: VBottomNavigation
96800
- VBtnGroup: VBtnGroup
96801
- VBtn: VBtn
96802
- VCheckbox: VCheckbox
96803
- VCheckboxBtn: VCheckboxBtn
96811
+ VCode: VCode
96812
+ VChipGroup: VChipGroup
96804
96813
  VCard: VCard
96805
96814
  VCardActions: VCardActions
96806
96815
  VCardItem: VCardItem
96807
96816
  VCardSubtitle: VCardSubtitle
96808
96817
  VCardText: VCardText
96809
96818
  VCardTitle: VCardTitle
96810
- VBtnToggle: VBtnToggle
96811
- VChipGroup: VChipGroup
96812
- VCarousel: VCarousel
96813
- VCarouselItem: VCarouselItem
96814
- VColorPicker: VColorPicker
96815
- VCode: VCode
96816
96819
  VCombobox: VCombobox
96820
+ VCheckbox: VCheckbox
96821
+ VCheckboxBtn: VCheckboxBtn
96822
+ VDialog: VDialog
96823
+ VCounter: VCounter
96824
+ VColorPicker: VColorPicker
96817
96825
  VDataTable: VDataTable
96818
96826
  VDataTableHeaders: VDataTableHeaders
96819
96827
  VDataTableFooter: VDataTableFooter
@@ -96827,32 +96835,28 @@ declare module 'vue' {
96827
96835
  VDatePickerMonth: VDatePickerMonth
96828
96836
  VDatePickerMonths: VDatePickerMonths
96829
96837
  VDatePickerYears: VDatePickerYears
96830
- VCounter: VCounter
96831
- VChip: VChip
96832
- VEmptyState: VEmptyState
96833
- VDivider: VDivider
96834
96838
  VExpansionPanels: VExpansionPanels
96835
96839
  VExpansionPanel: VExpansionPanel
96836
96840
  VExpansionPanelText: VExpansionPanelText
96837
96841
  VExpansionPanelTitle: VExpansionPanelTitle
96838
- VDialog: VDialog
96839
- VFab: VFab
96842
+ VDivider: VDivider
96843
+ VEmptyState: VEmptyState
96840
96844
  VField: VField
96841
96845
  VFieldLabel: VFieldLabel
96842
- VFooter: VFooter
96843
96846
  VFileInput: VFileInput
96847
+ VFooter: VFooter
96848
+ VFab: VFab
96844
96849
  VIcon: VIcon
96845
96850
  VComponentIcon: VComponentIcon
96846
96851
  VSvgIcon: VSvgIcon
96847
96852
  VLigatureIcon: VLigatureIcon
96848
96853
  VClassIcon: VClassIcon
96849
- VInput: VInput
96850
- VLabel: VLabel
96851
- VInfiniteScroll: VInfiniteScroll
96854
+ VImg: VImg
96852
96855
  VItemGroup: VItemGroup
96853
96856
  VItem: VItem
96857
+ VInput: VInput
96854
96858
  VKbd: VKbd
96855
- VImg: VImg
96859
+ VLabel: VLabel
96856
96860
  VList: VList
96857
96861
  VListGroup: VListGroup
96858
96862
  VListImg: VListImg
@@ -96862,66 +96866,67 @@ declare module 'vue' {
96862
96866
  VListItemSubtitle: VListItemSubtitle
96863
96867
  VListItemTitle: VListItemTitle
96864
96868
  VListSubheader: VListSubheader
96869
+ VInfiniteScroll: VInfiniteScroll
96865
96870
  VMain: VMain
96866
- VNavigationDrawer: VNavigationDrawer
96867
- VMenu: VMenu
96868
- VOtpInput: VOtpInput
96869
- VOverlay: VOverlay
96870
96871
  VMessages: VMessages
96872
+ VMenu: VMenu
96873
+ VNavigationDrawer: VNavigationDrawer
96871
96874
  VNumberInput: VNumberInput
96872
- VPagination: VPagination
96875
+ VOtpInput: VOtpInput
96873
96876
  VProgressLinear: VProgressLinear
96874
- VRadioGroup: VRadioGroup
96877
+ VPagination: VPagination
96878
+ VOverlay: VOverlay
96875
96879
  VProgressCircular: VProgressCircular
96876
- VSelect: VSelect
96880
+ VRadioGroup: VRadioGroup
96877
96881
  VRating: VRating
96882
+ VSelect: VSelect
96883
+ VSheet: VSheet
96878
96884
  VSelectionControl: VSelectionControl
96885
+ VSkeletonLoader: VSkeletonLoader
96879
96886
  VSelectionControlGroup: VSelectionControlGroup
96880
96887
  VSlideGroup: VSlideGroup
96881
96888
  VSlideGroupItem: VSlideGroupItem
96882
- VSnackbar: VSnackbar
96883
- VSheet: VSheet
96884
- VSkeletonLoader: VSkeletonLoader
96885
96889
  VSlider: VSlider
96890
+ VSnackbar: VSnackbar
96886
96891
  VSwitch: VSwitch
96887
- VTab: VTab
96888
- VTabs: VTabs
96889
- VTabsWindow: VTabsWindow
96890
- VTabsWindowItem: VTabsWindowItem
96891
- VSystemBar: VSystemBar
96892
96892
  VStepper: VStepper
96893
96893
  VStepperActions: VStepperActions
96894
96894
  VStepperHeader: VStepperHeader
96895
96895
  VStepperItem: VStepperItem
96896
96896
  VStepperWindow: VStepperWindow
96897
96897
  VStepperWindowItem: VStepperWindowItem
96898
- VTextarea: VTextarea
96899
96898
  VTable: VTable
96899
+ VTab: VTab
96900
+ VTabs: VTabs
96901
+ VTabsWindow: VTabsWindow
96902
+ VTabsWindowItem: VTabsWindowItem
96903
+ VTimeline: VTimeline
96904
+ VTimelineItem: VTimelineItem
96905
+ VTextField: VTextField
96900
96906
  VToolbar: VToolbar
96901
96907
  VToolbarTitle: VToolbarTitle
96902
96908
  VToolbarItems: VToolbarItems
96903
- VTextField: VTextField
96904
- VTimeline: VTimeline
96905
- VTimelineItem: VTimelineItem
96909
+ VTextarea: VTextarea
96910
+ VTooltip: VTooltip
96906
96911
  VWindow: VWindow
96907
96912
  VWindowItem: VWindowItem
96908
- VTooltip: VTooltip
96913
+ VSystemBar: VSystemBar
96909
96914
  VConfirmEdit: VConfirmEdit
96910
96915
  VDataIterator: VDataIterator
96911
96916
  VDefaultsProvider: VDefaultsProvider
96912
96917
  VForm: VForm
96913
- VHover: VHover
96914
96918
  VContainer: VContainer
96915
96919
  VCol: VCol
96916
96920
  VRow: VRow
96917
96921
  VSpacer: VSpacer
96922
+ VHover: VHover
96918
96923
  VLayout: VLayout
96919
96924
  VLayoutItem: VLayoutItem
96920
96925
  VLazy: VLazy
96921
96926
  VLocaleProvider: VLocaleProvider
96922
96927
  VNoSsr: VNoSsr
96923
- VParallax: VParallax
96924
96928
  VRadio: VRadio
96929
+ VParallax: VParallax
96925
96930
  VRangeSlider: VRangeSlider
96926
96931
  VResponsive: VResponsive
96927
96932
  VSnackbarQueue: VSnackbarQueue
@@ -96946,26 +96951,26 @@ declare module 'vue' {
96946
96951
  VExpandTransition: VExpandTransition
96947
96952
  VExpandXTransition: VExpandXTransition
96948
96953
  VDialogTransition: VDialogTransition
96949
- VFileUpload: VFileUpload
96950
- VFileUploadItem: VFileUploadItem
96951
- VStepperVertical: VStepperVertical
96952
- VStepperVerticalItem: VStepperVerticalItem
96953
- VStepperVerticalActions: VStepperVerticalActions
96954
+ VIconBtn: VIconBtn
96954
96955
  VCalendar: VCalendar
96955
96956
  VCalendarDay: VCalendarDay
96956
96957
  VCalendarHeader: VCalendarHeader
96957
96958
  VCalendarInterval: VCalendarInterval
96958
96959
  VCalendarIntervalEvent: VCalendarIntervalEvent
96959
96960
  VCalendarMonthDay: VCalendarMonthDay
96960
- VIconBtn: VIconBtn
96961
+ VFileUpload: VFileUpload
96962
+ VFileUploadItem: VFileUploadItem
96963
+ VStepperVertical: VStepperVertical
96964
+ VStepperVerticalItem: VStepperVerticalItem
96965
+ VStepperVerticalActions: VStepperVerticalActions
96961
96966
  VPicker: VPicker
96962
96967
  VPickerTitle: VPickerTitle
96963
- VTimePicker: VTimePicker
96964
- VTimePickerClock: VTimePickerClock
96965
- VTimePickerControls: VTimePickerControls
96966
96968
  VTreeview: VTreeview
96967
96969
  VTreeviewItem: VTreeviewItem
96968
96970
  VTreeviewGroup: VTreeviewGroup
96971
+ VTimePicker: VTimePicker
96972
+ VTimePickerClock: VTimePickerClock
96973
+ VTimePickerControls: VTimePickerControls
96969
96974
  VDateInput: VDateInput
96970
96975
  VPullToRefresh: VPullToRefresh
96971
96976
  }
@@ -1,10 +1,10 @@
1
1
  /*!
2
- * Vuetify v3.8.1-dev.2025-04-07
2
+ * Vuetify v3.8.1-dev.2025-04-12
3
3
  * Forged by John Leider
4
4
  * Released under the MIT License.
5
5
  */
6
6
 
7
- import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
7
+ import { shallowRef, reactive, computed, watchEffect, toRefs, capitalize, unref, Fragment, isVNode, Comment, warn, getCurrentInstance as getCurrentInstance$1, ref, provide, inject as inject$1, defineComponent as defineComponent$1, h, camelize, onBeforeUnmount, watch, readonly, onMounted, useId, onDeactivated, onActivated, onScopeDispose, effectScope, toRaw, getCurrentScope, createVNode, TransitionGroup, Transition, mergeProps, isRef, toRef, onBeforeMount, nextTick, withDirectives, resolveDirective, vShow, onUpdated, Text, resolveDynamicComponent, toDisplayString, markRaw, Teleport, cloneVNode, createTextVNode, onUnmounted, onBeforeUpdate, withModifiers, vModelText, resolveComponent, render } from 'vue';
8
8
 
9
9
  // Types
10
10
  // eslint-disable-line vue/prefer-import-from-vue
@@ -81,6 +81,7 @@ const IN_BROWSER = typeof window !== 'undefined';
81
81
  const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
82
82
  const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
83
83
  const SUPPORTS_EYE_DROPPER = IN_BROWSER && 'EyeDropper' in window;
84
+ const SUPPORTS_MATCH_MEDIA = IN_BROWSER && 'matchMedia' in window && typeof window.matchMedia === 'function';
84
85
 
85
86
  function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
86
87
  function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -2281,6 +2282,7 @@ const makeThemeProps = propsFactory({
2281
2282
  function genDefaults$2() {
2282
2283
  return {
2283
2284
  defaultTheme: 'light',
2285
+ prefix: 'v-',
2284
2286
  variations: {
2285
2287
  colors: [],
2286
2288
  lighten: 0,
@@ -2362,7 +2364,10 @@ function genDefaults$2() {
2362
2364
  }
2363
2365
  }
2364
2366
  },
2365
- stylesheetId: 'vuetify-theme-stylesheet'
2367
+ stylesheetId: 'vuetify-theme-stylesheet',
2368
+ scoped: false,
2369
+ unimportant: false,
2370
+ utilities: true
2366
2371
  };
2367
2372
  }
2368
2373
  function parseThemeOptions() {
@@ -2385,21 +2390,21 @@ function parseThemeOptions() {
2385
2390
  function createCssClass(lines, selector, content, scope) {
2386
2391
  lines.push(`${getScopedSelector(selector, scope)} {\n`, ...content.map(line => ` ${line};\n`), '}\n');
2387
2392
  }
2388
- function genCssVariables(theme) {
2393
+ function genCssVariables(theme, prefix) {
2389
2394
  const lightOverlay = theme.dark ? 2 : 1;
2390
2395
  const darkOverlay = theme.dark ? 1 : 2;
2391
2396
  const variables = [];
2392
2397
  for (const [key, value] of Object.entries(theme.colors)) {
2393
2398
  const rgb = parseColor(value);
2394
- variables.push(`--v-theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
2399
+ variables.push(`--${prefix}theme-${key}: ${rgb.r},${rgb.g},${rgb.b}`);
2395
2400
  if (!key.startsWith('on-')) {
2396
- variables.push(`--v-theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
2401
+ variables.push(`--${prefix}theme-${key}-overlay-multiplier: ${getLuma(value) > 0.18 ? lightOverlay : darkOverlay}`);
2397
2402
  }
2398
2403
  }
2399
2404
  for (const [key, value] of Object.entries(theme.variables)) {
2400
2405
  const color = typeof value === 'string' && value.startsWith('#') ? parseColor(value) : undefined;
2401
2406
  const rgb = color ? `${color.r}, ${color.g}, ${color.b}` : undefined;
2402
- variables.push(`--v-${key}: ${rgb ?? value}`);
2407
+ variables.push(`--${prefix}${key}: ${rgb ?? value}`);
2403
2408
  }
2404
2409
  return variables;
2405
2410
  }
@@ -2443,7 +2448,8 @@ function getScopedSelector(selector, scope) {
2443
2448
  const scopeSelector = `:where(${scope})`;
2444
2449
  return selector === ':root' ? scopeSelector : `${scopeSelector} ${selector}`;
2445
2450
  }
2446
- function upsertStyles(styleEl, styles) {
2451
+ function upsertStyles(id, cspNonce, styles) {
2452
+ const styleEl = getOrCreateStyleElement(id, cspNonce);
2447
2453
  if (!styleEl) return;
2448
2454
  styleEl.innerHTML = styles;
2449
2455
  }
@@ -2463,8 +2469,17 @@ function getOrCreateStyleElement(id, cspNonce) {
2463
2469
  // Composables
2464
2470
  function createTheme(options) {
2465
2471
  const parsedOptions = parseThemeOptions(options);
2466
- const name = shallowRef(parsedOptions.defaultTheme);
2472
+ const _name = shallowRef(parsedOptions.defaultTheme);
2467
2473
  const themes = ref(parsedOptions.themes);
2474
+ const systemName = shallowRef('light');
2475
+ const name = computed({
2476
+ get() {
2477
+ return _name.value === 'system' ? systemName.value : _name.value;
2478
+ },
2479
+ set(val) {
2480
+ _name.value = val;
2481
+ }
2482
+ });
2468
2483
  const computedThemes = computed(() => {
2469
2484
  const acc = {};
2470
2485
  for (const [name, original] of Object.entries(themes.value)) {
@@ -2485,28 +2500,49 @@ function createTheme(options) {
2485
2500
  const current = computed(() => computedThemes.value[name.value]);
2486
2501
  const styles = computed(() => {
2487
2502
  const lines = [];
2503
+ const important = parsedOptions.unimportant ? '' : ' !important';
2504
+ const scoped = parsedOptions.scoped ? parsedOptions.prefix : '';
2488
2505
  if (current.value?.dark) {
2489
2506
  createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope);
2490
2507
  }
2491
- createCssClass(lines, ':root', genCssVariables(current.value), parsedOptions.scope);
2508
+ createCssClass(lines, ':root', genCssVariables(current.value, parsedOptions.prefix), parsedOptions.scope);
2492
2509
  for (const [themeName, theme] of Object.entries(computedThemes.value)) {
2493
- createCssClass(lines, `.v-theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme)], parsedOptions.scope);
2494
- }
2495
- const bgLines = [];
2496
- const fgLines = [];
2497
- const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
2498
- for (const key of colors) {
2499
- if (key.startsWith('on-')) {
2500
- createCssClass(fgLines, `.${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
2501
- } else {
2502
- createCssClass(bgLines, `.bg-${key}`, [`--v-theme-overlay-multiplier: var(--v-theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--v-theme-${key})) !important`, `color: rgb(var(--v-theme-on-${key})) !important`], parsedOptions.scope);
2503
- createCssClass(fgLines, `.text-${key}`, [`color: rgb(var(--v-theme-${key})) !important`], parsedOptions.scope);
2504
- createCssClass(fgLines, `.border-${key}`, [`--v-border-color: var(--v-theme-${key})`], parsedOptions.scope);
2510
+ createCssClass(lines, `.${parsedOptions.prefix}theme--${themeName}`, [`color-scheme: ${theme.dark ? 'dark' : 'normal'}`, ...genCssVariables(theme, parsedOptions.prefix)], parsedOptions.scope);
2511
+ }
2512
+ if (parsedOptions.utilities) {
2513
+ const bgLines = [];
2514
+ const fgLines = [];
2515
+ const colors = new Set(Object.values(computedThemes.value).flatMap(theme => Object.keys(theme.colors)));
2516
+ for (const key of colors) {
2517
+ if (key.startsWith('on-')) {
2518
+ createCssClass(fgLines, `.${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
2519
+ } else {
2520
+ createCssClass(bgLines, `.${scoped}bg-${key}`, [`--${parsedOptions.prefix}theme-overlay-multiplier: var(--${parsedOptions.prefix}theme-${key}-overlay-multiplier)`, `background-color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`, `color: rgb(var(--${parsedOptions.prefix}theme-on-${key}))${important}`], parsedOptions.scope);
2521
+ createCssClass(fgLines, `.${scoped}text-${key}`, [`color: rgb(var(--${parsedOptions.prefix}theme-${key}))${important}`], parsedOptions.scope);
2522
+ createCssClass(fgLines, `.${scoped}border-${key}`, [`--${parsedOptions.prefix}border-color: var(--${parsedOptions.prefix}theme-${key})`], parsedOptions.scope);
2523
+ }
2505
2524
  }
2525
+ lines.push(...bgLines, ...fgLines);
2506
2526
  }
2507
- lines.push(...bgLines, ...fgLines);
2508
2527
  return lines.map((str, i) => i === 0 ? str : ` ${str}`).join('');
2509
2528
  });
2529
+ const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `${parsedOptions.prefix}theme--${name.value}`);
2530
+ const themeNames = computed(() => Object.keys(computedThemes.value));
2531
+ if (SUPPORTS_MATCH_MEDIA) {
2532
+ const media = window.matchMedia('(prefers-color-scheme: dark)');
2533
+ function updateSystemName() {
2534
+ systemName.value = media.matches ? 'dark' : 'light';
2535
+ }
2536
+ updateSystemName();
2537
+ media.addEventListener('change', updateSystemName, {
2538
+ passive: true
2539
+ });
2540
+ if (getCurrentScope()) {
2541
+ onScopeDispose(() => {
2542
+ media.removeEventListener('change', updateSystemName);
2543
+ });
2544
+ }
2545
+ }
2510
2546
  function install(app) {
2511
2547
  if (parsedOptions.isDisabled) return;
2512
2548
  const head = app._context.provides.usehead;
@@ -2544,22 +2580,55 @@ function createTheme(options) {
2544
2580
  updateStyles();
2545
2581
  }
2546
2582
  function updateStyles() {
2547
- upsertStyles(getOrCreateStyleElement(parsedOptions.stylesheetId, parsedOptions.cspNonce), styles.value);
2583
+ upsertStyles(parsedOptions.stylesheetId, parsedOptions.cspNonce, styles.value);
2548
2584
  }
2549
2585
  }
2550
2586
  }
2551
- const themeClasses = computed(() => parsedOptions.isDisabled ? undefined : `v-theme--${name.value}`);
2587
+ function change(themeName) {
2588
+ if (!themeNames.value.includes(themeName)) {
2589
+ consoleWarn(`Theme "${themeName}" not found on the Vuetify theme instance`);
2590
+ return;
2591
+ }
2592
+ name.value = themeName;
2593
+ }
2594
+ function cycle() {
2595
+ let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeNames.value;
2596
+ const currentIndex = themeArray.indexOf(name.value);
2597
+ const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % themeArray.length;
2598
+ change(themeArray[nextIndex]);
2599
+ }
2600
+ function toggle() {
2601
+ let themeArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['light', 'dark'];
2602
+ cycle(themeArray);
2603
+ }
2604
+ const globalName = new Proxy(name, {
2605
+ get(target, prop) {
2606
+ return target[prop];
2607
+ },
2608
+ set(target, prop, val) {
2609
+ if (prop === 'value') {
2610
+ deprecate(`theme.global.name.value = ${val}`, `theme.change('${val}')`);
2611
+ }
2612
+ // @ts-expect-error
2613
+ target[prop] = val;
2614
+ return true;
2615
+ }
2616
+ });
2552
2617
  return {
2553
2618
  install,
2619
+ change,
2620
+ cycle,
2621
+ toggle,
2554
2622
  isDisabled: parsedOptions.isDisabled,
2555
2623
  name,
2556
2624
  themes,
2557
2625
  current,
2558
2626
  computedThemes,
2627
+ prefix: parsedOptions.prefix,
2559
2628
  themeClasses,
2560
2629
  styles,
2561
2630
  global: {
2562
- name,
2631
+ name: globalName,
2563
2632
  current
2564
2633
  }
2565
2634
  };
@@ -2570,7 +2639,7 @@ function provideTheme(props) {
2570
2639
  if (!theme) throw new Error('Could not find Vuetify theme injection');
2571
2640
  const name = computed(() => props.theme ?? theme.name.value);
2572
2641
  const current = computed(() => theme.themes.value[name.value]);
2573
- const themeClasses = computed(() => theme.isDisabled ? undefined : `v-theme--${name.value}`);
2642
+ const themeClasses = computed(() => theme.isDisabled ? undefined : `${theme.prefix}theme--${name.value}`);
2574
2643
  const newTheme = {
2575
2644
  ...theme,
2576
2645
  name,
@@ -31565,7 +31634,7 @@ function createVuetify$1() {
31565
31634
  };
31566
31635
  });
31567
31636
  }
31568
- const version$1 = "3.8.1-dev.2025-04-07";
31637
+ const version$1 = "3.8.1-dev.2025-04-12";
31569
31638
  createVuetify$1.version = version$1;
31570
31639
 
31571
31640
  // Vue's inject() can only be used in setup
@@ -31850,7 +31919,7 @@ var index = /*#__PURE__*/Object.freeze({
31850
31919
 
31851
31920
  /* eslint-disable local-rules/sort-imports */
31852
31921
 
31853
- const version = "3.8.1-dev.2025-04-07";
31922
+ const version = "3.8.1-dev.2025-04-12";
31854
31923
 
31855
31924
  /* eslint-disable local-rules/sort-imports */
31856
31925