How to use Vuetify colors as parameters in vuetify/settings SCSS?

[Maxim-Mazurok]

I want to do this in my src/plugins/vuetify/settings.scss:

@use "sass:map";
@use "vuetify/lib/styles/settings/_colors.scss" as colors;

@use "vuetify/settings" with (
  $navigation-drawer-color: map.get(colors.$grey, "darken-3")
);

But I get an error:

[vite:css] [sass] This module was already loaded, so it can't be configured using "with".
    ┌──> node_modules/vuetify/lib/styles/settings/_index.sass
2   │   @forward './colors'
    │   ^^^^^^^^^^^^^^^^^^^ new load
    ╵
    ┌──> src/plugins/vuetify/settings.scss
2   │   @use "vuetify/lib/styles/settings/_colors.scss" as colors;
    │   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
... │
4   │ ┌ @use "vuetify/settings" with (
5   │ │   $navigation-drawer-color: map.get(colors.$grey, "darken-3")
6   │ │ );
    │ └─^ configuration
    ╵
  node_modules/vuetify/lib/styles/settings/_index.sass 2:1  @forward
  node_modules/vuetify/_settings.scss 1:1                   @use
  src/plugins/vuetify/settings.scss 4:1                     @use
  plugin-vuetify:components/VCode/VCode.sass 1:1           root stylesheet

Any idea how to do this properly?

[Maxim-Mazurok]

My temporary workaround:

src/plugins/vuetify/vuetify.ts:

import { createVuetify } from "vuetify";
import colors from "vuetify/util/colors";

export const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          "grey-darken-3": colors.grey.darken3, // this was the best way to expose the color to be used in settings.scss; TODO: remove when removing $navigation-drawer-color customization
        },
      },
    },
  },
});

src/plugins/vuetify/settings.scss:

@use "vuetify/settings" with (
  $navigation-drawer-color: rgb(var(--v-theme-grey-darken-3))
);

It's a temporary measure anyway, we will likely just remove this customization with a few others in one go, or will adjust text-on-surface color in the theme. Cheers!

[vrilcode]

I need that too. No details about that in the docs :(