is-dark-theme
is a utility to help investigate the feasibility of detecting pages in dark mode. In order to do so, the code checks the computed background color and compute the perceived brightness to determine if the color is dark or light. This utility was developed to potentially be used for WKWebview based browsers.
To run this POC, ensure you have Node.js installed on your machine. Then, follow these steps:
- Clone the repo.
- Navigate to the project directory and install dependencies with:
npm i && npx playwright install
- To run the tests, execute:
npm test
The node script at index.js
will start a browser and navigate to different websites sepecified in the code. It will extract features from the website and attempt to determine if the website is in dark or light mode. After all tests finish, the code will output:
- a
screenshot
folder with screenshots of the websites in dark and light modes. - a
website_theme_support.csv
that contains an analysis of the run.
To enhance the functionality and documentation of is-dark-theme
, a GitHub Actions workflow automates the generation of CSV data and screenshots that document the detection process in various scenarios.
How to read the table below ?
- The
Screenshots Match
column shows whether the screenshots taken in dark and light mode matched. A matching screenshot means that the website doesn't have built-in dark theme support ( or at least not controlled by the system theme ). - The
DM Detected in System DM
column shows if a dark themed website was detected when the system theme was set to dark. - The
DM Detected in System LM
column shows if a dark themed website was detected when the system theme was set to light. - The
Expected
shows whether the result for that website is expected or not.
Website | Screenshots Match | DM Detected in System DM | DM Detected in System LM | Expected |
---|---|---|---|---|
https://duckduckgo.com | No | Yes | No | ✅ |
https://reddit.com | No | Yes | No | ✅ |
https://openai.com/ | No | Yes | No | ✅ |
https://docs.github.com/en | No | Yes | No | ✅ |
https://twitter.com | No | Yes | No | ✅ |
https://cnn.com | Yes | No | No | ✅ |
https://google.com | Yes | No | No | ✅ |
https://playwright.dev/ | No | Yes | No | ✅ |
https://docs.amplify.aws/ | No | Yes | No | ✅ |
https://usehooks-ts.com/ | No | Yes | No | ✅ |
https://picocss.com/ | No | Yes | No | ✅ |
https://nextjs.org/ | No | Yes | No | ✅ |
https://hurl.dev/ | No | Yes | No | ✅ |
https://joshwcomeau.com | No | Yes | No | ✅ |
Screenshots available here.