pretty-checkbox custom two colors

[mbagiella]

Hi,
First of all, thank you for this usefull module.

I'm trying to customize the color to enable DarkMode and LightMode. (I'm using angular 11 with Angular Material)

My main css (style.scss) [not working]

`
@import '~pretty-checkbox/src/scss/variables';

$pretty--color-default:black;
$pretty--colors:(
primary: black
);

.light {
$pretty--color-default:white;
$pretty--colors:(
primary: white
);
}
`

How can I achieve this ?

EDIT:

I found how to achieve this but I'm pretty sure there is a more cleaner way to do it

`
$dark-primary: mat-palette($mat-grey, 900);
$light-primary: mat-palette($mat-grey, 100);
$warn: mat-palette($mat-red);

$dark-theme: mat-dark-theme($dark-primary, $light-primary, $warn);
$light-theme: mat-light-theme($light-primary, $dark-primary, $warn);

@mixin theme-color-grabber($dark-theme) {

.pretty input:checked ~ .state.p-primary-o label:before,
.pretty.p-toggle .state.p-primary-o label:before{
border-color: mat-color($primary);
}

.pretty.p-default:not(.p-fill) input:checked ~ .state.p-primary-o label:after {
background-color: mat-color($primary) !important;
}

.state {
label{
&:before {
border-color: mat-color($primary);
}
}
}
@include angular-material-theme($dark-theme);
@include theme-color-grabber($dark-theme);

.light {
@include angular-material-theme($light-theme);
@include theme-color-grabber($light-theme);
}
`

I'm not sure it was the best way to achieve this, tho :)