0

I'm fairly new to Sass and the material design library.

I want to personalize the checkbox of the library. The checkbox is using the theme's secondary color for the checked/marked state and I want to use the theme's primary color instead.

I also don't want to change anything else. for example, I need the unmarked stroke color to remain the same.

I found this mixin in the documentation

container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)

How can I call this mixin, giving it the appropriate parameters like the theme's primary color for the marked-fill-color color, and keep the old unmarked-stroke-color?

I see that the library defines a number of variables for that. For example, the --mdc-theme-primary is the theme's primary color, and the mdc-checkbox-unchecked-color is the unmarked-stroke-color. How can I reference these variables?

For the primary color I tested with theme.$primary. It seems to be working but couldn't find something for the unmarked stroke.

Abdelhakim
  • 815
  • 1
  • 5
  • 19

0 Answers0