How to make BEM modifiers correctly?

Question

BEM

There is a hat. The content in it (navigation links, SVG icons + logo) can be of different colors: either light or dark.
How to make modifiers correctly?
Create 2 modifiers header--light and header--dark and start from them using CSS selectors like this:
.header--dark .nav__link { color: #000; }
.header--light .nav__link { color: #fff; }
It is even readable: if the header is dark, then for the navigation links that are INSIDE this header we make a dark color (and by analogy for a light header).
Or create separate modifiers for each element inside the header?
Like .nav__link--light/.nav__link--dark or .socials__link--dark/.socials__link--light
Here we create a lot of modifiers that are unlikely to be useful anywhere else.

Please provide an example of the correct markup and styles for the header from screenshots (according to BEM)

Answer 1

No nested selectors if it can be avoided, so either .nav__link--light/.nav__link--dark or
use css variables: