From 5ff05ea19fb8c4b0da2ef1523c5a6d9f34d61420 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Mon, 19 May 2025 08:44:34 +0000
Subject: [PATCH] fix(@angular/pwa): remove `background_color` and
 `theme_color` from manifest

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

Closes: #30336
---
 packages/angular/pwa/README.md                             | 4 +---
 packages/angular/pwa/pwa/files/assets/manifest.webmanifest | 2 --
 packages/angular/pwa/pwa/index.ts                          | 1 -
 packages/angular/pwa/pwa/index_spec.ts                     | 2 --
 4 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/angular/pwa/README.md b/packages/angular/pwa/README.md
index c7ecbdaa99af..26eeb00620a9 100644
--- a/packages/angular/pwa/README.md
+++ b/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.
 
diff --git a/packages/angular/pwa/pwa/files/assets/manifest.webmanifest b/packages/angular/pwa/pwa/files/assets/manifest.webmanifest
index f8c1e3960511..efa364291a63 100644
--- a/packages/angular/pwa/pwa/files/assets/manifest.webmanifest
+++ b/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": "./",
diff --git a/packages/angular/pwa/pwa/index.ts b/packages/angular/pwa/pwa/index.ts
index f78095b7a564..c316ed581695 100644
--- a/packages/angular/pwa/pwa/index.ts
+++ b/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',
diff --git a/packages/angular/pwa/pwa/index_spec.ts b/packages/angular/pwa/pwa/index_spec.ts
index 37677894b446..42d698ce8f8f 100644
--- a/packages/angular/pwa/pwa/index_spec.ts
+++ b/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>/,
     );