Skip to content

Adaptive favicon (light vs. dark mode) #1157

Closed

Description

Summary

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

Screenshot 2020-06-25 at 20 23 56

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:

Screenshot 2020-06-25 at 20 17 43

Dark mode:

Screenshot 2020-06-25 at 20 17 23

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions