How to change title and navigation color based on color theme of page

I'm trying to figure out how to change the site title and navigation color of my site based on the color theme I have set for each individual page. 

Currently, I have the color for the site title set to white so that is shows up on the dark background image of my homepage. I would like to have additional pages on my site that have a white background, however when I change the page to a light theme, with a white background, my site title and navigation disappear because they are white. 

I've searched through all of the settings in the color theme editor, but there is no option for changing the navigation color according to color theme (which I believe would solve the issue), and I've read through multiple articles in the squarespace forum, but can't seem to find a simple solution. 

For example, see my home page -- https://www.chefanastasia.com/

Now, see the page I'm trying to build and notice that you can't see the navigation and title because they are white on white background (this page is not currently linked to live site, copy and paste to browser) -- https://www.chefanastasia.com/how-it-works-1 

Can you help?

You can add this code to Page Header (page where you want to change site title/nav color)

<style>
  a#site-title, div.header-nav-item a, header#header svg {
    color: #f1f !important;
}
</style>