Adaptive favicon (light vs. dark mode)

[sl4m]

Summary

The current favicon is not quite visible when the dark system theme is used (I'm currently using macOS's dark mode).

The proposal is to have an adaptive favicon, one that visibly changes the favicon based on the system's current theme using the prefers-color-scheme media query and a bit of JavaScript.

Light mode:

Dark mode:

Motivation

To easily identify the browser tabs that are opened to Rust websites.

Drawbacks

People might not like the light Rust logo in dark mode.

This also uses a CSS media query which is not supported on all versions of Firefox for Android, Samsung Internet, and IE. It's also not supported on the versions prior to:

• Chrome 76
• Edge 76
• Firefox 67
• Safari 12.1

See more here.

As a workaround, we can have it fallback to the default favicon that we see now (see Rationale and alternatives)

Rationale and alternatives

An alternative solution is to create a favicon that explicitly has a light background inside the Rust logo. Similar to how the favicon looks in light mode, the dark mode will still show dark Rust logo with a light background.

This requires no CSS media query feature support and no extra JavaScript.

Maintenance

I've already created a fix for this issue that involves using the CSS media query and JavaScript.

Unresolved Questions

N/A

[Fasani]

Came across this post today which was a no JS way:
https://catalin.red/svg-favicon-light-dark-theme/

@XAMPPRocky I can pick this task up if you agree to have 1 white and 1 black version of the Rust logo?

[Fasani]

Actually @sl4m do you have a PR? Sorry I just read that part when you said you already did it. :-)

[XAMPPRocky]

Thank you for your issue! I think this would be fine as a CSS media query.

[sl4m]

@Fasani Yes, I'd like to take this on if you don't mind.

[Fasani]

@sl4m please do.