[Accessibility] Added light icons for dark themes (#4479)

fixes #4241
<!-- Link to relevant issue (for ex: "fixes #1234") which will
automatically close the issue once the PR is merged -->

## PR Type
<!-- Please uncomment one ore more that apply to this PR -->

Bugfix
<!-- - Feature -->
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->

## Describe the current behavior?
<!-- Please describe the current behavior that is being modified or link
to a relevant issue. -->
Our blackicons (svgs embedded in imgs) weren't changing color when dark
mode was activated on the OS level. So they were blending in to the
background (black on black).

## Describe the new behavior?
When dark mode is detected, our black icons become white.

## PR Checklist
- [x] Test: run `npm run test` and ensure that all tests pass
- [x] Target main branch (or an appropriate release branch if
appropriate for a bug fix)
- [x] Ensure that your contribution follows [standard accessibility
guidelines](https://docs.microsoft.com/en-us/microsoft-edge/accessibility/design).
Use tools like https://webhint.io/ to validate your changes.

## Additional Information

---------

Co-authored-by: Justin Willis <[email protected]>

apps/blog/src/docs/android/generating-your-android-package/generating-your-android-package.md

@@ -59,7 +59,7 @@ With this new functionality, you can customize your PWA for Android:
 - **Package ID:** The Android identifier unique to your app
 - **App name:** The full name of your app. We prepopulate this with the [app name](https://w3c.github.io/manifest/#name-member) from your PWA’s app manifest.
 - **Launcher name**: The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We prepopulate this with [short_name](https://w3c.github.io/manifest/#short_name-member) from your PWA’s app manifest.
-- **App version**: This is the version string displayed to end users, e.g. “1.0.0.0”
+- **App version**: This is the version string displayed to end users, e.g. "1.0.0.0"
 - **App version code**: This is an integer used as a private, internal version of your app.
 - **Host, Start URL, Manifest URL**: The URLs used to launch your PWA in the Android app. We prepopulate these for you from your app manifest.
 - **Status bar color, Nav bar color**: The color of the Android status bar and navigation bar in your PWA. You can also hide these bars by setting Display to

apps/pwabuilder/src/script/components/todo-list-item.ts

@@ -25,6 +25,8 @@ export class TodoItem extends LitElement {
   @state() clickable: boolean = false;
   @state() isOpen: boolean = false;
 
+  @state() darkMode: boolean = false;
+
   static get styles() {
     return [
       css`
@@ -150,6 +152,14 @@ export class TodoItem extends LitElement {
     super();
   }
 
+  connectedCallback(){
+    super.connectedCallback();
+
+    // understand the users color preference
+    const result = window.matchMedia('(prefers-color-scheme: dark)');
+    this.darkMode = result.matches; // TRUE if user prefers dark mode
+  }
+
   decideClasses(){
 
     if(this.status === "retest" || this.field.startsWith("Open") || manifest_fields[this.field] || service_worker_fields[this.field]){
@@ -206,7 +216,7 @@ export class TodoItem extends LitElement {
         return html`<img src=${enhancement_src} alt="app capability result icon"/>`
 
       case "retest":
-        return html`<img src=${retest_src} style="color: black" alt="retest site icon"/>`
+        return html`<img src=${this.darkMode ? retest_src_light : retest_src} style="color: black" alt="retest site icon"/>`
     }
 
     return html`<img src=${yield_src} alt="yield result icon"/>`
@@ -248,4 +258,5 @@ export class TodoItem extends LitElement {
 const yield_src = "/assets/new/yield.svg";
 const stop_src = "/assets/new/stop.svg";
 const enhancement_src = "/assets/new/enhancement.svg";
-const retest_src = "/assets/new/retest-black.svg";
+const retest_src = "/assets/new/retest-icon.svg";
+const retest_src_light = "/assets/new/retest-icon_light.svg";

apps/pwabuilder/src/script/pages/app-report.ts

@@ -87,7 +87,6 @@ export class AppReport extends LitElement {
   @state() canPackageList: boolean[] = [false, false, false];
   @state() canPackage: boolean = false;
   @state() manifestEditorOpened: boolean = false;
-  @state() retestPath: string = "/assets/new/retest-black.svg";
 
   @state() swSelectorOpen: boolean = false;
 
@@ -144,6 +143,8 @@ export class AppReport extends LitElement {
   @state() stopShowingNotificationTooltip: boolean = false;
   @state() closeOpenTooltips: boolean = true;
 
+  @state() darkMode: boolean = false;
+
   private possible_messages = [
     {"messages": {
                   "green": "PWABuilder has analyzed your Web Manifest and your manifest is ready for packaging! Great job you have a perfect score!",
@@ -1841,6 +1842,12 @@ export class AppReport extends LitElement {
   // Responsible for setting running the initial tests
   async connectedCallback(): Promise<void> {
     super.connectedCallback();
+
+
+    // understand the users color preference
+    const result = window.matchMedia('(prefers-color-scheme: dark)');
+    this.darkMode = result.matches; // TRUE if user prefers dark mode
+
     const search = new URLSearchParams(location.search);
     const site = search.get('site');
     if (site) {
@@ -2922,7 +2929,7 @@ export class AppReport extends LitElement {
                       <p id="last-edited" style=${styleMap(this.LastEditedStyles)}>${this.lastTested}</p>
 
                       <img
-                        src=${this.retestPath}
+                        src=${`/assets/new/retest-icon${this.darkMode ? "_light" : ""}.svg`}
                         alt="retest site"
                       />
                     </button>
@@ -2965,18 +2972,21 @@ export class AppReport extends LitElement {
                 <p>Available stores:</p>
                 <img
                   title="Windows"
-                  src="/assets/windows_icon.svg"
+                  src=${`/assets/windows_icon${this.darkMode ? "_light" : ""}.svg`}
                   alt="Windows"
                 />
-                <img title="iOS" src="/assets/apple_icon.svg" alt="iOS" />
+                <img 
+                  title="iOS" 
+                  src=${`/assets/apple_icon${this.darkMode ? "_light" : ""}.svg`}
+                  alt="iOS" />
                 <img
                   title="Android"
-                  src="/assets/android_icon_full.svg"
+                  src=${`/assets/android_icon_full${this.darkMode ? "_light" : ""}.svg`}
                   alt="Android"
                 />
                 <img
                   title="Meta Quest"
-                  src="/assets/meta_icon.svg"
+                  src=${`/assets/meta_icon${this.darkMode ? "_light" : ""}.svg`}
                   alt="Meta Quest"
                 />
               </div>

docs/builder/android.md

@@ -49,7 +49,7 @@ There are a ton of options you can configure when packaging for Android. Here's
 | **Package ID** | The Android identifier unique to your app                                                                                                                                                                                                        |
 | **App name** | The full name of your app. We pre-populate this with the app name from your PWA’s app manifest.                                                                                                                                                     |
 | **Launcher name** | The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We pre-populate this with short_name from your PWA’s app manifest.                                                         |
-| **App version** | This is the version string displayed to end users, e.g. “1.0.0.0”                                                                                                                                                                               |
+| **App version** | This is the version string displayed to end users, e.g. "1.0.0.0"                                                                                                                                                                               |
 | **App version code** | This is an integer used as a private, internal version of your app.                                                                                                                                                                        |
 | **Host, Start URL, Manifest URL** | The URLs used to launch your PWA in the Android app. We pre-populate these for you from your app manifest.                                                                                                                     |
 | **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color.                                                                                                                      |

docs/builder/meta.md

@@ -52,7 +52,7 @@ Here's a breakdown of the properties associated with your package:
 | :------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------- |
 |**Package ID** | The ID of your Meta Quest app. We recommend a reverse-domain style string: com.domainname.appname. Letters, numbers, periods, hyphens, and underscores are allowed. |
 |**App name** | The name of your app as displayed to users.                                                                                                                           |
-|**App version** | This is the version string displayed to end users, e.g. “1.0.0.0”                                                                                                  |
+|**App version** | This is the version string displayed to end users, e.g. "1.0.0.0"                                                                                                  |
 |**App version code**| This is an integer used as a private, internal version of your app.                                                                                           |
 |**Manifest URL** | The URL of your app manifest. We pre-populate this for you.                                                                                                        |
 |**Signing key**| How the APK app package will be digitally signed: <br><br> `None`: your app package won’t signed. <br><br> `New`: PWABuilder will create a new signing key for you. The signing key will be included in your zip download. Choosing this will let you fill in details like password, alias, and more. <br><br> `Mine`: Upload an existing .keystore file to use for signing the app package. This should be used if you are updating an existing app. You’ll be prompted to specify your existing key passwords and alias.                                                         |

docs/builder/other-android.md

@@ -50,7 +50,7 @@ There are a ton of options you can configure when packaging for Android. Here's
 | **Package ID** | The Android identifier unique to your app                                                                                                                                                                                                        |
 | **App name** | The full name of your app. We pre-populate this with the app name from your PWA’s app manifest.                                                                                                                                                     |
 | **Launcher name** | The name of your app in the Android launcher. This is typically the same as app name, or a shortened version of it. We pre-populate this with short_name from your PWA’s app manifest.                                                         |
-| **Version** | This is the version string displayed to end users, e.g. “1.0.0.0”                                                                                                                                                                               |
+| **Version** | This is the version string displayed to end users, e.g. "1.0.0.0"                                                                                                                                                                               |
 | **Version code** | This is an integer used as a private, internal version of your app.                                                                                                                                                                        |
 | **Host, Start URL, Manifest URL** | The URLs used to launch your PWA in the Android app. We pre-populate these for you from your app manifest.                                                                                                                     |
 | **Theme color** | The theme color used for the Android status bar in your app. Typically, this should be set to your manifest's theme_color.                                                                                                                      |

docs/home/native-features.md

@@ -81,7 +81,7 @@ To enable window controls overlay, set the value of `display_override` in your w
 
 ```json
 {
-    “display_override”: [“window-controls-overlay”],
+    "display_override": ["window-controls-overlay"],
     "display": "standalone"
 }
 ```