From 2f715663c86ed8e4abb104afd547fe489c97243a Mon Sep 17 00:00:00 2001 From: Justin Gish Date: Wed, 27 Mar 2024 16:03:14 -0600 Subject: [PATCH 1/2] Updating Vuetify decorator example The Vuetify decorator example was expecting that the labels from the theme switcher would exactly match the vuetify theme keys from the vuetifyOptions. This change makes that association more explicit while also allowing the display labels to be different from the Vuetify theme keys. --- code/addons/themes/docs/api.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index b499dd945744..f04e6658da31 100644 --- a/code/addons/themes/docs/api.md +++ b/code/addons/themes/docs/api.md @@ -166,7 +166,7 @@ export const withVuetifyTheme = ({ themes, defaultTheme }) => { setup() { const theme = useTheme(); - theme.global.name.value = selected; + theme.global.name.value = themes[selected]; return { theme, @@ -195,12 +195,13 @@ setup((app) => { export const decorators = [ withVuetifyTheme({ + // These keys are the labels that will be displayed in the toolbar theme switcher + // The values must match the theme keys from your VuetifyOptions themes: { light: 'light', dark: 'dark', - customTheme: 'myCustomTheme', + 'high contrast': 'highContrast', }, - defaultTheme: 'customTheme', // The key of your default theme + defaultTheme: 'light', // The key of your default theme }), -]; -``` +];``` From bedeb9aa7c3ef639e10c574f7cdb5f07a49cc8aa Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 19 Apr 2024 09:11:41 +0200 Subject: [PATCH 2/2] Update Vuetify decorator snippet --- code/addons/themes/docs/api.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index f04e6658da31..0c8fc32996dd 100644 --- a/code/addons/themes/docs/api.md +++ b/code/addons/themes/docs/api.md @@ -195,13 +195,14 @@ setup((app) => { export const decorators = [ withVuetifyTheme({ - // These keys are the labels that will be displayed in the toolbar theme switcher + // These keys are the labels that will be displayed in the toolbar theme switcher // The values must match the theme keys from your VuetifyOptions themes: { light: 'light', dark: 'dark', - 'high contrast': 'highContrast', + 'high contrast': 'highContrast', }, defaultTheme: 'light', // The key of your default theme }), -];``` +]; +```