feat(@angular/build): run vitest browser with playwright with OS theme

Author: csvn

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider.ts

@@ -99,6 +99,17 @@ export async function setupBrowserConfiguration(
             launchOptions: {
               executablePath: process.env.CHROME_BIN,
             },
+            contextOptions: {
+              // Enables `prefer-color-scheme` for Vitest browser instead of `light`
+              colorScheme: null,
+            },
+          });
+        } else if (providerName === 'playwright') {
+          provider = providerFactory({
+            contextOptions: {
+              // Enables `prefer-color-scheme` for Vitest browser instead of `light`
+              colorScheme: null,
+            },
           });
         } else {
           provider = providerFactory();

packages/angular/build/src/builders/unit-test/runners/vitest/browser-provider_spec.ts

@@ -28,7 +28,7 @@ describe('setupBrowserConfiguration', () => {
     );
     await writeFile(
       join(playwrightPkgPath, 'index.js'),
-      'module.exports = { playwright: () => ({ name: "playwright" }) };',
+      'module.exports = { playwright: (options) => ({ name: "playwright", options }) };',
     );
   });
 
@@ -135,6 +135,23 @@ describe('setupBrowserConfiguration', () => {
     }
   });
 
+  // See: https://github.com/angular/angular-cli/issues/32469
+  it('should pass colorScheme=null to Playwright provider', async () => {
+    const { browser } = await setupBrowserConfiguration(
+      ['ChromeHeadless'],
+      undefined,
+      false,
+      workspaceRoot,
+      undefined,
+    );
+
+    expect(browser?.provider?.options).toEqual(jasmine.objectContaining({
+      contextOptions: jasmine.objectContaining({
+        colorScheme: null,
+      }),
+    }));
+  });
+
   it('should support Preview provider forcing headless false', async () => {
     // Create mock preview package
     const previewPkgPath = join(workspaceRoot, 'node_modules/@vitest/browser-preview');