fix(@angular/pwa): remove background_color and theme_color from manifest

These properties are unnecessary and create additional maintenance overhead for developers.

Closes: #30336
(cherry picked from commit 7a21deb)

Author: alan-agius4

packages/angular/pwa/README.md

@@ -13,9 +13,7 @@ Executing the command mentioned above will perform the following actions:
 1. Adds [`@angular/service-worker`](https://npmjs.com/@angular/service-worker) as a dependency to your project.
 1. Enables service worker builds in the Angular CLI.
 1. Imports and registers the service worker in the application module.
-1. Updates the `index.html` file:
-   - Includes a link to add the [manifest.webmanifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) file.
-   - Adds a meta tag for `theme-color`.
+1. Updates the `index.html` file to inlclude a link to add the [manifest.webmanifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) file.
 1. Installs icon files to support the installed Progressive Web App (PWA).
 1. Creates the service worker configuration file called `ngsw-config.json`, specifying caching behaviors and other settings.
 

packages/angular/pwa/pwa/files/assets/manifest.webmanifest

@@ -1,8 +1,6 @@
 {
   "name": "<%= title %>",
   "short_name": "<%= title %>",
-  "theme_color": "#1976d2",
-  "background_color": "#fafafa",
   "display": "standalone",
   "scope": "./",
   "start_url": "./",

packages/angular/pwa/pwa/index.ts

@@ -45,7 +45,6 @@ function updateIndexFile(path: string): Rule {
     rewriter.on('endTag', (endTag) => {
       if (endTag.tagName === 'head') {
         rewriter.emitRaw('  <link rel="manifest" href="manifest.webmanifest">\n');
-        rewriter.emitRaw('  <meta name="theme-color" content="#1976d2">\n');
       } else if (endTag.tagName === 'body' && needsNoScript) {
         rewriter.emitRaw(
           '  <noscript>Please enable JavaScript to continue using this application.</noscript>\n',

packages/angular/pwa/pwa/index_spec.ts

@@ -112,7 +112,6 @@ describe('PWA Schematic', () => {
     const content = tree.readContent('projects/bar/src/index.html');
 
     expect(content).toMatch(/<link rel="manifest" href="manifest.webmanifest">/);
-    expect(content).toMatch(/<meta name="theme-color" content="#1976d2">/);
     expect(content).toMatch(
       /<noscript>Please enable JavaScript to continue using this application.<\/noscript>/,
     );
@@ -127,7 +126,6 @@ describe('PWA Schematic', () => {
     const content = tree.readContent('projects/bar/src/index.html');
 
     expect(content).toMatch(/<link rel="manifest" href="manifest.webmanifest">/);
-    expect(content).toMatch(/<meta name="theme-color" content="#1976d2">/);
     expect(content).not.toMatch(
       /<noscript>Please enable JavaScript to continue using this application.<\/noscript>/,
     );