pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.73k stars 283 forks source link

[DOCS] Clarify light/dark theme icon support #3558

Open johncrim opened 2 years ago

johncrim commented 2 years ago

What's your suggestion for improvement for our docs?

I have a few questions that aren't addressed in #1258 or Windows Light Mode Icons that I think should be covered in the docs:

  1. Does "color_scheme": "dark" do anything, or is it only "color_scheme": "light"?
  2. Do user-agents that don't support color_scheme ignore the whole icon, or just ignore the color_scheme value and use the other values in the icon?
  3. Is there a way to specify a default icon and override it. Eg use the light mode icon by default, but use the dark mode icon iff dark mode is enabled and the platform supports "color_scheme": "dark". I tried the following:
    {
      "src": "/icon/win/44.png",
      "type": "image/png",
      "sizes": "44x44",
      "purpose": "any"
    },
    {
      "src": "/icon/win/44d.png",
      "type": "image/png",
      "sizes": "44x44",
      "purpose": "any",
      "color_scheme": "dark"
    },

but it picked the dark mode icon even when I have light mode active, when installing the PWA from Chrome or Edge.

  1. Does dark mode/light mode only work with PWA builder output and only when all 15 icons are specified per:

https://github.com/pwa-builder/PWABuilder/issues/1258#issuecomment-813737074

In other words, does dark/light icons NOT work in any of these cases: a) You just install the PWA from Chrome/Edge (not using the .msixbundle) b) Only some of the 15 icons are specified in the manifest c) Any other icon sizes use the "color_scheme" property

Do you have an implementation or a solution in mind?

Either direct answers to these questions or enough background in the docs that the answers are clear without a bunch of trial and error.

I really appreciate the doc (https://blog.pwabuilder.com/docs/image-recommendations-for-windows-pwa-packages/ ), though it's been a struggle to get all the different icons to work correctly.

ghost commented 1 year ago

This issue has been marked as "needs attention πŸ‘‹" since it has not been triaged for 7 days. Please triage the issue .

ghost commented 1 year ago

This issue has been marked as "needs attention πŸ‘‹" since it has not been triaged for 7 days. Please triage the issue .

jgw96 commented 1 year ago

Hey @johncrim , so it sounds like this is more of a docs issue? Your findings are correct, our light / dark mode icon support is early. There is standards work going on around this, which would mean that the icons would just start working when Chromium supports this.

ghost commented 1 year ago

This issue has been automatically marked as "no-recent-activity" because it requires author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

johncrim commented 1 year ago

Yes @jgw96 - this specific issue was intended as a docs issue. I wasted a bunch of time on trial and error and these questions came up.

Though I also care about these use cases (they should have reasonable, intuitive answers), in case they help in the standards work.

I also opened this issue: Image size is necessary but not sufficient for choosing images because IMO clearer configuration is needed for which images are used for which purposes, and extrapolating from the PWA manifest IMO provides poor control for native app images.

Thank you for the clarification on this being early.

jgw96 commented 1 year ago

For the meeting this morning: I think this falls into a bigger issue where we need better docs around Icons, which I know we have discussed before, however I cannot remember exactly what was decided, or if something was decided on.