Add dark mode and mobile view snapshots

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

package.json

@@ -79,5 +79,5 @@
     "printWidth": 80,
     "tabWidth": 2
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].1"
 }

website/snapshots.js

@@ -1,18 +1,45 @@
 const urls = [
+  { name: 'URL Spec', path: '/examples/using-remote-url/' },
   {
     name: 'YAML Spec',
     path: '/examples/using-single-yaml/',
   },
-  { name: 'URL Spec', path: '/examples/using-remote-url/' },
   { name: 'Schema Imports', path: '/docs/guides/schema-imports' },
 ];
 
-module.exports = () => {
-  const baseUrl = process.env.TARGET_URL || 'http://localhost:3000';
-  return urls.map(({ name, path }) => {
-    return {
-      name,
-      url: `${baseUrl}${path}`,
-    };
-  });
-};
+const baseUrl = process.env.TARGET_URL || 'http://localhost:3000';
+
+const snapshots = urls.map(({ name, path }) => {
+  return {
+    name,
+    url: `${baseUrl}${path}`,
+    waitForTimeout: 400,
+    execute: {
+      afterNavigation() {
+        // Switch to light mode if currently dark mode
+        document
+          .querySelector(
+            '[title^="Switch between dark and light mode (currently dark mode)"]',
+          )
+          // @ts-ignore
+          ?.click();
+      },
+    },
+    additionalSnapshots: [
+      {
+        suffix: ' (Dark Mode)',
+        execute() {
+          // Switch to dark mode if currently light mode
+          document
+            .querySelector(
+              '[title^="Switch between dark and light mode (currently light mode)"]',
+            )
+            // @ts-ignore
+            ?.click();
+        },
+      },
+    ],
+  };
+});
+
+module.exports = snapshots;