fix(theme): move defaults object to generator function

fixes vuetifyjs#18339
tmasrat · Dec 6, 2023 · af07b7f · af07b7f
1 parent 5a97683
commit af07b7f
Showing 1 changed file with 83 additions and 79 deletions.
diff --git a/packages/vuetify/src/composables/theme.ts b/packages/vuetify/src/composables/theme.ts
@@ -105,98 +105,102 @@ export const makeThemeProps = propsFactory({
   theme: String,
 }, 'theme')
 
-const defaultThemeOptions: Exclude<ThemeOptions, false> = {
-  defaultTheme: 'light',
-  variations: { colors: [], lighten: 0, darken: 0 },
-  themes: {
-    light: {
-      dark: false,
-      colors: {
-        background: '#FFFFFF',
-        surface: '#FFFFFF',
-        'surface-bright': '#FFFFFF',
-        'surface-variant': '#424242',
-        'on-surface-variant': '#EEEEEE',
-        primary: '#1867C0',
-        'primary-darken-1': '#1F5592',
-        secondary: '#48A9A6',
-        'secondary-darken-1': '#018786',
-        error: '#B00020',
-        info: '#2196F3',
-        success: '#4CAF50',
-        warning: '#FB8C00',
-      },
-      variables: {
-        'border-color': '#000000',
-        'border-opacity': 0.12,
-        'high-emphasis-opacity': 0.87,
-        'medium-emphasis-opacity': 0.60,
-        'disabled-opacity': 0.38,
-        'idle-opacity': 0.04,
-        'hover-opacity': 0.04,
-        'focus-opacity': 0.12,
-        'selected-opacity': 0.08,
-        'activated-opacity': 0.12,
-        'pressed-opacity': 0.12,
-        'dragged-opacity': 0.08,
-        'theme-kbd': '#212529',
-        'theme-on-kbd': '#FFFFFF',
-        'theme-code': '#F5F5F5',
-        'theme-on-code': '#000000',
-      },
-    },
-    dark: {
-      dark: true,
-      colors: {
-        background: '#121212',
-        surface: '#212121',
-        'surface-bright': '#ccbfd6',
-        'surface-variant': '#a3a3a3',
-        'on-surface-variant': '#424242',
-        primary: '#2196F3',
-        'primary-darken-1': '#277CC1',
-        secondary: '#54B6B2',
-        'secondary-darken-1': '#48A9A6',
-        error: '#CF6679',
-        info: '#2196F3',
-        success: '#4CAF50',
-        warning: '#FB8C00',
+function genDefaults () {
+  return {
+    defaultTheme: 'light',
+    variations: { colors: [], lighten: 0, darken: 0 },
+    themes: {
+      light: {
+        dark: false,
+        colors: {
+          background: '#FFFFFF',
+          surface: '#FFFFFF',
+          'surface-bright': '#FFFFFF',
+          'surface-variant': '#424242',
+          'on-surface-variant': '#EEEEEE',
+          primary: '#1867C0',
+          'primary-darken-1': '#1F5592',
+          secondary: '#48A9A6',
+          'secondary-darken-1': '#018786',
+          error: '#B00020',
+          info: '#2196F3',
+          success: '#4CAF50',
+          warning: '#FB8C00',
+        },
+        variables: {
+          'border-color': '#000000',
+          'border-opacity': 0.12,
+          'high-emphasis-opacity': 0.87,
+          'medium-emphasis-opacity': 0.60,
+          'disabled-opacity': 0.38,
+          'idle-opacity': 0.04,
+          'hover-opacity': 0.04,
+          'focus-opacity': 0.12,
+          'selected-opacity': 0.08,
+          'activated-opacity': 0.12,
+          'pressed-opacity': 0.12,
+          'dragged-opacity': 0.08,
+          'theme-kbd': '#212529',
+          'theme-on-kbd': '#FFFFFF',
+          'theme-code': '#F5F5F5',
+          'theme-on-code': '#000000',
+        },
       },
-      variables: {
-        'border-color': '#FFFFFF',
-        'border-opacity': 0.12,
-        'high-emphasis-opacity': 1,
-        'medium-emphasis-opacity': 0.70,
-        'disabled-opacity': 0.50,
-        'idle-opacity': 0.10,
-        'hover-opacity': 0.04,
-        'focus-opacity': 0.12,
-        'selected-opacity': 0.08,
-        'activated-opacity': 0.12,
-        'pressed-opacity': 0.16,
-        'dragged-opacity': 0.08,
-        'theme-kbd': '#212529',
-        'theme-on-kbd': '#FFFFFF',
-        'theme-code': '#343434',
-        'theme-on-code': '#CCCCCC',
+      dark: {
+        dark: true,
+        colors: {
+          background: '#121212',
+          surface: '#212121',
+          'surface-bright': '#ccbfd6',
+          'surface-variant': '#a3a3a3',
+          'on-surface-variant': '#424242',
+          primary: '#2196F3',
+          'primary-darken-1': '#277CC1',
+          secondary: '#54B6B2',
+          'secondary-darken-1': '#48A9A6',
+          error: '#CF6679',
+          info: '#2196F3',
+          success: '#4CAF50',
+          warning: '#FB8C00',
+        },
+        variables: {
+          'border-color': '#FFFFFF',
+          'border-opacity': 0.12,
+          'high-emphasis-opacity': 1,
+          'medium-emphasis-opacity': 0.70,
+          'disabled-opacity': 0.50,
+          'idle-opacity': 0.10,
+          'hover-opacity': 0.04,
+          'focus-opacity': 0.12,
+          'selected-opacity': 0.08,
+          'activated-opacity': 0.12,
+          'pressed-opacity': 0.16,
+          'dragged-opacity': 0.08,
+          'theme-kbd': '#212529',
+          'theme-on-kbd': '#FFFFFF',
+          'theme-code': '#343434',
+          'theme-on-code': '#CCCCCC',
+        },
       },
     },
-  },
+  }
 }
 
-function parseThemeOptions (options: ThemeOptions = defaultThemeOptions): InternalThemeOptions {
-  if (!options) return { ...defaultThemeOptions, isDisabled: true } as InternalThemeOptions
+function parseThemeOptions (options: ThemeOptions = genDefaults()): InternalThemeOptions {
+  const defaults = genDefaults()
+
+  if (!options) return { ...defaults, isDisabled: true } as any
 
   const themes: Record<string, InternalThemeDefinition> = {}
   for (const [key, theme] of Object.entries(options.themes ?? {})) {
     const defaultTheme = theme.dark || key === 'dark'
-      ? defaultThemeOptions.themes?.dark
-      : defaultThemeOptions.themes?.light
+      ? defaults.themes?.dark
+      : defaults.themes?.light
     themes[key] = mergeDeep(defaultTheme, theme) as InternalThemeDefinition
   }
 
   return mergeDeep(
-    defaultThemeOptions,
+    defaults,
     { ...options, themes },
   ) as InternalThemeOptions
 }