JS That Detects/Sets Light vs Dark Header Colors Makes Wrong Choice Sometimes

I’m helping an artist friend with their website and we’re having some issues with the header navigation color sometimes being set wrong (eg, being set to black when it should be white, or vice-versa).

It seems that there is a Javascript that tries to detect whether there is a light or dark image (eg, Featured Image) and then it adjusts the header navigation coloring accordingly. On some pages this works fine. But we have several pages where it chooses wrong.

This seems very difficult to troubleshoot, though I will give examples in case you can spot an easy solution. But I’m also wondering if there is any built-in way to force a particular color for the header/nav on a given page?

On the home page sometimes it chooses white text (which is the correct choice) and sometimes it chooses black (which is very difficult to see.

On the portfolio page it chooses white when black would be better (you can’t hardly see the page title).

On the “fragmented” page it chooses black text on a black background, making the header/nav completely invisible.

Note that we’re using a child theme, though in theory that shouldn’t make any difference.

Thanks in advance for your help! My friend loves your theme and it feels like a great fit overall for their needs. But we do need to figure out something for this color issue.

🙂