[theme] How to use collor-palette to configure theme | sass

This is not really a bug but rather help request - hopefully there is a quick answer.

I would like to configure my theme using material color palette (which can be found in @material/theme/color-palette

I am able to access the colors like this

@use "@material/theme" as theme;
// or @use "@material/theme/color-palette" as theme;
body {
  background-color: theme.$red-500;
}

but then how to configure $primary or $secondary colors

@use "@material/theme" as theme;
@use "@material/theme" with (
  $primary: theme.$red-500,
  $secondary: theme.$pink-500,
);

This throws Error: This module was already loaded, so it can't be configured using "with".

I’ve also tried

@use "@material/theme" as theme;
theme.$primary: theme.$red-500;
@use "material-components-web"; // custom file importing single components

body {
  background-color: theme.$red-500;
}

And I do get background red but mdc components are not changed.

How can I set material $primary,$secondary or other colors using material color palette? Thanks for help!

[asyncLiz]

Try this:

// Configure
@use "@material/theme/color-palette";
@use "@material/theme/variables" with (
  $primary: color-palette.$red-500
);

// Usage
@use "@material/theme";

body {
  background-color: theme.$primary;
}

I think this would be a documentation feature we should expand upon. Either explaining how to do it like above, or refactoring code to make it more feasible.

[asyncLiz]

Move the import after the use. @import url() is a runtime CSS statement, not a Sass @import module.

@use "@material/typography" with (
  $font-family: unquote("Dosis")
);
@import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap');

@include typography.core-styles;

This will transpile to the following CSS:

@import url("https://fonts.googleapis.com/css2?family=Dosis&display=swap");
.mdc-typography {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: Dosis;
  /* @alternate */
  font-family: var(--mdc-typography-font-family, Dosis);
}
/* additional styles */

I just tested and verified that it works. If you continue to have trouble though, feel free to open a new issue so we can keep this one focused on the theme color palette documentation problem.