docs: add light/dark screenshots

and automate the process of generating these screenshots

README.md

@@ -1,7 +1,5 @@
 # Example Electron Application
 
-![Screenshot](/docs/screenshot.png)
-
 An example to showcase a typescript-based electron application.
 
 Uses native esm everywhere possible (`main` and `renderer`), as electron 28 now supports it. `preload` bundle is still commonjs to allow sandbox.
@@ -24,6 +22,16 @@ Showcases creation of a direct communication channel between the renderer and ma
 
 `npm run typecheck` - checks sources using typescript.
 
+## Screenshots
+
+### Dark Theme
+
+![Screenshot](docs/screenshot-dark.png)
+
+### Light Theme
+
+![Screenshot](docs/screenshot-light.png)
+
 ## Prerequisites for `build:full`
 
 On a freshly installed Fedora 39, with all updates:

package.json

@@ -30,6 +30,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^5.1.0",
+    "playwright": "^1.49.1",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

scripts/generate-screenshots.js

@@ -0,0 +1,12 @@
+import { fileURLToPath } from "node:url";
+import { _electron as electron } from "playwright";
+
+for (const colorScheme of ["light", "dark"]) {
+  const app = await electron.launch({ args: ["."], colorScheme });
+  const window = await app.firstWindow();
+  await window.screenshot({
+    type: "png",
+    path: fileURLToPath(new URL(`../docs/screenshot-${colorScheme}.png`, import.meta.url)),
+  });
+  await app.close();
+}