How use Theme.css like a Theming.css

Question

Hello,

I am contacting you because I have read many tutorials and topics on my subject but I don't understand...

Context :

I use angular for a project, and I had defined each element to my liking, in theming.css . While browsing it, I had managed to understand how to modify the elements:

1. Create my proper colour

   in $mat-light-theme-background: ( hover: white, );

so it's the same for the dark theme

in $mat-dark-theme-background: (
    hover: black,
);

2. Creating mixins (example) & Putting colours in my mixins

   mixin item($config-or-theme) { $config: mat-get-color-config($config-or-theme); $background: map-get($config, background); $foreground: map-get($config, foreground); .item:hover { background: mat-color($background, "hover"); } }

3. Apply the mixins

   @include itemGroup($theme-or-color-config);

And thanks to this method, I could really modulate everything.

Except that this use is unconventional, and at each npm install, it was reset to zero.

I read a lot of articles on the themes, but I don't understand how to use, and have the same modularity (access any tag like :hover etc).

Would you have a search clue to resolve my problem, and use good way to angular dev ?

Thank you for taking the time to read my question,

I wish you an excellent day. Yours sincerely, Almaniac

Edit 1 : I used mat-light-theme background&foreground. I redid them and implemented them in theme.scss. I can use the white theme but not the dark one. I managed to make progress thanks to the create-wonky-theme tutorial

Edit 2 :

I'm really interested in Angular. For the moment, I find only one solution to my problem, at each component check the value of the theme that I get with a subscribe, and display the visual according to the value obtained.

But this method annoys me, I would really like to do the same scheme as theming.scss. In theming, you can define each element with mixins, which allows a genericity without equal. This is the effect I would like to reproduce, with the color system: $mat-light-theme-background, $mat-light-theme-foreground.

It shouldn't be that complicated, since the _theming is imported in theme.scss, I must miss some things, but I must be close.

I can't find an example, having the same logic as me, and that's what scares me. Indeed, I hope I'm not mistaken in my methodology, because I'm still stuck on this thought.