Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

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

Closed
@pstarze

Description

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!

Metadata

Assignees

No one assigned

    Labels

    Unresolved (Archived)Open and unresolved issues and PRs that were closed due to archiving the repository.backlogdocs

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions