Material-components-web: [theme] How to use collor-palette to configure theme | sass

[pstarze]

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.

[pstarze]

Hi

Thanks! That is really helpful and quick!

[asyncLiz]

I'm going to keep this open specifically for theme's color palette documentation that should be fixed.

5723 is the main issue around docs, but I think theme could use some extra guidance.

[jrodriguezj88]

Hi @asyncLiz,

Could you please extend your example including a custom font(like: @import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap')) with the mdc-typography component?

I'm struggling to set the all variables(theme & font) with the new @use sass rule.

Thanks in advance.

[asyncLiz]

The typography readme contains a great section about overriding font styles, including examples on font-family: https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography#overriding-styles

[jrodriguezj88]

I agree it comes with good examples, but how you deal with an @import url('https://fonts.googleapis.com/css2?family=Dosis&display=swap') that has to be defined after the @use rules?

This code prompts an error because you @use rules have to be first and if you import the font later it doesn't update the font-family of the material library:

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

[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.

[jrodriguezj88]

Thank you @asyncLiz ! I really appreciate the help.