Visual regression checks: light, dark, zoom
This page is for designers who want to know what a release changed visually, including what they did not intend.
The matrix
| Width | Scale | Modes |
|---|---|---|
| 1440 px | 1 | light, dark |
| 960 px | 2 (200% zoom) | light, dark |
| 375 px | 2 | light |
These are the widths the Exponential project uses to check its own pages.
Step by step
- On the test installation with the previous release, take screenshots of every page of the page list in every
cell of the matrix. Name them
<page>-<width>-<mode>.png. - Update to the new release and take the same set.
- Compare: side by side, or with an image-diff tool that highlights changed pixels.
- For every difference, decide: intended (note it in the changelog) or a regression (fix it).
- Keep the new set as the baseline for the next release, outside the theme's published files if large.
Typical regressions
- Dark mode: a white card on a dark background, text with too little contrast.
- Zoom: a header that overlaps content, horizontal scrolling.
- Phone: a menu that does not open, images overflowing.
Related pages
- Screenshots for a theme
- Checklist: dark mode
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.