dark-mode-screenshot

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #llm #android #rust #java #awesome #kubernetes #pytorch #mcp #ios

dark-mode-screenshot

(★ 61)

This Puppeteer script takes a 📷 screenshot of a webpage in 🌞 Light and 🌒 Dark Mode.

파일 탐색기

최종 버전 다운로드 (.zip)

.gitignore
dark-mode-screenshot.js
LICENSE
package-lock.json
package.json
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Dark Mode Screenshot 📷🌒

This [Puppeteer](https://github.com/GoogleChrome/puppeteer/) script
takes a screenshot of a webpage in Light and Dark Mode.

<table>
  <thead>
    <th>Dark Mode</th>
    <th>Light Mode</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="https://github.com/tomayac/dark-mode-screenshot/blob/cabecd90eee5299e10089311cba61f70694f00d3/screenshot-dark.png?raw=true">
      </td>
      <td>
        <img src="https://github.com/tomayac/dark-mode-screenshot/blob/cabecd90eee5299e10089311cba61f70694f00d3/screenshot-light.png?raw=true">
      </td>
    </tr>
    <tr>
      <td>
        <code>screenshot-dark.png</code>
      </td>
      <td>
        <code>screenshot-light.png</code>
      </td>
    </tr>
  </tbody>
</table>

## 👩‍💻 Usage

Locally from the command line:

```bash
$ node dark-mode-screenshot.js --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
```

Without installing remotely from npm:

```bash
$ npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750
```

| Parameter (long) | Parameter (short) | Description |
| --- | --- | --- |
| `--url` | `-u` | The URL of the webpage, defaults to `https://googlechromelabs.github.io/dark-mode-toggle/ demo/index.html`. |
| `--output` | `-o` | The file prefix of the screenshot (there will be a light and a dark file), defaults to `screenshot`. |
| `--fullPage` | `-f` | Whether or not to take a full page screenshot, defaults to `true`. |
| `--pause` | `-p` | Time in milliseconds to pause before taking each screenshot, defaults to `0`. |

## Acknowledgements

Thanks to [@mathiasbynens](https://github.com/mathiasbynens) for implementing
[`page.emulateMediaFeatures(features)`](https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#pageemulatemediatypetype)
in Puppeteer and for making this script a lot lighter.

## 📄 License

Apache 2.0

dark-mode-screenshot

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

dark-mode-screenshot

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README