Use Playwright to test dark mode

Author: paazmaya

integration_tests/test/dark-mode.spec.ts

@@ -0,0 +1,29 @@
+import { test } from "fixtures";
+import { TEST_PROJECT } from "~client/_test/test.data.helper";
+import { mockGetProjects } from "utils/mocks";
+
+// Run tests in this file with dark mode preferred
+test.use({ colorScheme: "dark" });
+
+const project = TEST_PROJECT;
+
+test.beforeEach(async ({ page }) => {
+  await mockGetProjects(page, [project]);
+});
+
+test("get dark screens", async ({ page, vrt }) => {
+  await page.goto("/login");
+  await vrt.trackPage(page, "Login page - Dark mode");
+
+  await page.goto("/projects");
+  await vrt.trackPage(page, "Projects list page - Dark mode");
+
+  await page.goto("/profile");
+  await vrt.trackPage(page, "User profile page - Dark mode");
+
+  await page.goto("/register");
+  await vrt.trackPage(page, "Register page - Dark mode");
+
+  await page.goto("/users");
+  await vrt.trackPage(page, "User list page - Dark mode");
+});

playwright.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
     actionTimeout: 5000,
     navigationTimeout: 5000,
     trace: "retry-with-trace",
+    colorScheme: 'light',
   },
   retries: process.env.CI ? 1 : 0,
   forbidOnly: !!process.env.CI,