Add 2xl dark mode snapshots to breakpoint tests (#4915)

frontend/test/playwright/utils/breakpoints.ts

@@ -91,7 +91,10 @@ const makeBreakpointDescribe =
         options = {}
       ) => {
         const snapshotName = getSnapshotName(name, options.dir)
-        return innerExpectSnapshot(page, snapshotName, screenshotAble, options)
+        return innerExpectSnapshot(page, snapshotName, screenshotAble, {
+          ...options,
+          useColorMode: snapshotName.includes("-2xl"),
+        })
       }
 
       _block({ breakpoint, expectSnapshot })

frontend/test/playwright/utils/expect-snapshot.ts

@@ -2,6 +2,8 @@ import { expect } from "@playwright/test"
 
 import { type LanguageDirection, t } from "~~/test/playwright/utils/i18n"
 
+import { sleep } from "~~/test/playwright/utils/navigation"
+
 import type { Breakpoint } from "~/constants/screens"
 
 import type {
@@ -80,9 +82,7 @@ export const expectSnapshot: ExpectSnapshot = async (
   // Hide the theme switcher before taking the screenshot.
   screenshotOptions = {
     ...(screenshotOptions ?? {}),
-    style: `#storybook-theme-switcher {
-              visibility: hidden;
-            }`,
+    style: `#storybook-theme-switcher { visibility: hidden; }`,
   }
 
   expect
@@ -94,6 +94,9 @@ export const expectSnapshot: ExpectSnapshot = async (
   }
   await turnOnDarkMode(page, dir ?? "ltr")
 
+  // Wait for the theme to change.
+  await sleep(100)
+
   expect(await screenshotAble.screenshot(screenshotOptions)).toMatchSnapshot(
     getSnapshotName(name, "dark"),
     snapshotOptions