favicon: add light & dark option for OS's preferred color scheme

[tlindsay42]

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:

• Duplicated the existing favicon.html partial
• Added a new condition at the beginning checking for the existence of /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.
  • Added a condition within the new condition for to add favicon-light.svg if it exists with the appropriate media query
  • Same for the dark mode

As 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?

[cagix]

@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!

[tlindsay42]

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)">

[McShelby]

Just to make sure of the implications/limitations of this before implementing:

• Your solution solely changes the favicon according the the selected OS's color scheme. No other images (neither referenced in markdown nor the themes logo) will change.
• Also, switching the theme with the variant selector will not cause the favicon to change.

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 perfers-color-scheme property if only a light or dark image is available but not both.

[tlindsay42]

• Your solution solely changes the favicon according the the selected OS's color scheme. No other images (neither referenced in markdown nor the themes logo) will change.

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.

• Also, switching the theme with the variant selector will not cause the favicon to change.

Correct, because the site's theme is independent of the OS/browser mode preference.

The only thing I don't like about that is, how to explain this complexity to the user.

I'll draft something up in a bit and we can negotiate it. No rush on this by any means.

What's unclear to me is, how images are assigned to the perfers-color-scheme property if only a light or dark image is available but not both.

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.

[McShelby]

Sounds all okay to me. Just make a PR and let us fix potential flaws there (if any)

[tlindsay42]

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.

[McShelby]

Interesting testing results (more details on browser support)

• Chrome - Supports OS setting and switches its UI accordingly (okay), supports experimental manual setting in preferences (does not switch UI but displays the favicon according to OS setting) (okay)
• Edge - Supports OS setting and manual setting in preferences and switches its UI accordingly (okay)
• Firefox - Supports OS setting (switches UI) and manual setting in preferences (does not switch UI but displays the favicon according to manual setting) (not so okayish)

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.

[McShelby]

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.

This is more complicated as the render-image handler must be touched. This should be handled in another issue.

[tlindsay42]

...This should be handled in another issue.

100% agree and don't have the bandwidth for tackling this one right now. This issue is just for the light/dark theme favicon.

[tlindsay42]

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

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.

I'ld bet that Safari implements a forth variant.

lol agreed. I'll see if I can track down someone to test it today.

[tlindsay42]

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.

[McShelby]

Thanks for the submission. I've modified the code and also added lockup for the alternative logo, too. I hope it still works for your site.