-
-
Notifications
You must be signed in to change notification settings - Fork 179
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
favicon: add light & dark option for OS's preferred color scheme #549
Comments
@tlindsay42 Would that also work for "normal" images, i.e. could we have different images in dark mode versa light mode? That would be super handy! |
Yep! Here's what the HTML looks like (with the asset cache busting feature enabled): <link href="./images/favicon-light.svg?1685545177" rel="icon" type="image/svg+xml" media="(prefers-color-scheme: light)">
<link href="./images/favicon-dark.svg?1685545177" rel="icon" type="image/svg+xml" media="(prefers-color-scheme: dark)"> |
Just to make sure of the implications/limitations of this before implementing:
To my belief this behavior is feasible as the favicon blends into the OS chrome and does not relate to the selected theme. The only thing I don't like about that is, how to explain this complexity to the user. But as you've already mentioned: it's optional. What's unclear to me is, how images are assigned to the |
Correct, the feature will only change the favicon according to the OS' selected color scheme. No other images will change. Of note, Firefox and Edge will respect browser-level color scheme overrides, so if you set dark mode in the browser, but use light mode in the OS, you'll get a dark mode favicon. Chrome currently only respects the OS-level color scheme setting.
Correct, because the site's theme is independent of the OS/browser mode preference.
I'll draft something up in a bit and we can negotiate it. No rush on this by any means.
Haven't tested this yet, but will in a bit. My expectation is that no favicon will be served if there's no match, such as if the developer forgets one of the files or names it incorrectly. Should be a similar experience if they did the same with any of the existing favicon options. I figured the more forgiving option was the better choice here. |
Sounds all okay to me. Just make a PR and let us fix potential flaws there (if any) |
Also, just re-read your previous question about "normal" images and realized I misunderstood what you were asking earlier. I've got a solution for that challenge too, but I'll have to think about how to adapt it for hugo. |
Interesting testing results (more details on browser support)
This will cause Firefox to display the wrong icon if OS setting and manual setting differ. This can be observed with any GitHub page (like this one) I can live with this as prominent pages like GitHub have the same issue. I am wondering why Fierefox and Chrome leave the UI unchanged when manually setting the option. No other app behaves like this. Also, there seems to be no technical limitation to switch this during runtime, as the OS setting is applied immediately without a restart of both browsers I'ld bet that Safari implements a forth variant. |
This is more complicated as the |
100% agree and don't have the bandwidth for tackling this one right now. This issue is just for the light/dark theme favicon. |
Same. My guess is justifying investment & prioritization for features like this is tough when there's all sorts of things to address in the constantly changing ecosystem.
lol agreed. I'll see if I can track down someone to test it today. |
Tested the no match for mode scenario with both light & dark, and found that Chrome & Edge don't serve a favicon when there's no link with a matching media query, but Firefox will default to the non-matching favicon entry in a no media query match scenario. |
Thanks for the submission. I've modified the code and also added lockup for the alternative |
Hi @McShelby,
One of my customers requested light & dark theme favicons yesterday, which was easy enough to implement. Would you be interested in a PR for this feature? I think others would like this option too. ?
My implementation:
/static/images/favicon-light.svg
OR/static/images/favicon-dark.svg
and made the existing conditions all chain off this one so that no other favicon conditions are evaluated if one or both of these files exist. In testing, a favicon without a media query overrode the media query version.favicon-light.svg
if it exists with the appropriate media queryAs indicated, I only implemented this for SVG, but I could duplicate this for other types too in the PR if preferred. ?
Note: Media queries aren't supported for IE per https://caniuse.com/css-media-interaction, and I know that this project still supports it from recent mentions, but as long as it's noted in the docs (and partial?) that this feature isn't supported for edge case browsers & browser versions, I think it should be okay. Restating, this wouldn't break the existing logic- it adds it as a new most preferred option, so anyone with conflicting requirements could continue to use one of the existing favicon options or override the partial.
Interested?
The text was updated successfully, but these errors were encountered: