How can I configure Vuetify to use a dynamic color pack that switches between light and dark themes based on the current theme? Is there a specific way to set this up in the Vuetify scss configuration?

Here’s an example of the colors that I have in variables.scss:

Light Theme Colors:

$emotion: (
  "joy": #d1bf0e,
  "trust": #9bb700,
);

$colors: (
  "emotion": $emotion,
);

When the theme switches to dark, I want to use different colors:

Dark Theme Colors:

$emotion-dark: (
  "joy": #38a5fb,
  "trust": #c23a3a,
);

$colors: (
  "emotion": $emotion-dark,
);