It seems like you're working on the configuration in nuxt.config.js, right? That file doesn't have any knowledge about window or CSS as of now.
To set up CSS variables, you'll either need to import them from another source or define them directly in that file (which is perfectly fine since it's at the top level). The #fff fallback probably kicks in if a value is undefined or similar.
If you want to customize Vuetify colors, refer to this section on customization:
Vuetify generates CSS classes based on these values, which can be accessed in the DOM. These classes follow the same pattern as other helper classes, such as primary or secondary--text. When providing an entire color object (like colors.purple), the lighten/darken variations are used directly instead of being generated.
These values are also accessible through the $vuetify object under the theme property. This allows for dynamic modification of your theme. Behind the scenes, Vuetify will update your theme classes seamlessly, keeping your application up-to-date.
To update these values, you can do the following:
// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'
// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'
PS: The lighten/darken variations are automatically handled for you, making customization easier.