How to customise favicon colors for light and dark modes in browser

Hello, have you noticed that squarespace favicon looks great in light mode and dark mode browsers?

Its color change from black to white, to keep the logo visible in different backgrounds:

So please, do you know how to do it whit custom css?

9 hours ago, DaniellaWeiher said:

Hello, have you noticed that squarespace favicon looks great in light mode and dark mode browsers?

Its color change from black to white, to keep the logo visible in different backgrounds:

 

So please, do you know how to do it whit custom css?

 

Can you share your site so I can take a look?

5 hours ago, Beyondspace said:

Can you share your site so I can take a look?

Is currently on development but the favicon is already visible. My website is: daniellaweiher.com

36 minutes ago, DaniellaWeiher said:

Is currently on development but the favicon is already visible. My website is: daniellaweiher.com

What is your site-wide password?

2 minutes ago, Beyondspace said:

What is your site-wide password?

currently it is: trianglespace

14 hours ago, DaniellaWeiher said:

currently it is: trianglespace

Whichs page do you need to set the color for light/dark mode? I think we can use some Css to target with the Page Id then set the right color for your required elements

16 hours ago, Beyondspace said:

Whichs page do you need to set the color for light/dark mode? I think we can use some Css to target with the Page Id then set the right color for your required elements

I would need it in all the pages because there is only one favincon. So, it has be visible all the time. Color black in light mode and color white in dark mode.

9 hours ago, DaniellaWeiher said:

I would need it in all the pages because there is only one favincon. So, it has be visible all the time. Color black in light mode and color white in dark mode.

Currently I see that most of your pages are black mode

Can you share one page with the light mode?

I can not find them to check my code

Could you please share public css for this issue? Thanks!

@beyondspace / any userwith succesful solution, could you please post css publicly?

It doesn't seem like this was ever resolved, but Squarespace now offers the option to upload a different file for both browser light and dark modes.

Go to Settings (gear in bottom left corner) > Website > Favicon (4th option down)