Skip to content
RecipesDoc

Dark Mode, Reduced Motion and Print Views

Certyn checks your pages with the dark theme, the reduced motion setting and print styles on, and files what breaks.

For teams who support dark mode or reduced motion, or have pages people print.

Your setup

  • A web app on staging that follows the system theme, or has its own theme switch.
  • Pages with animation: carousels, page transitions, a hero video.
  • Pages people print: an invoice, a receipt, a report.

Say this to Certyn

On staging, check the dashboard and settings in dark mode, check the home page with reduced motion on, and check that an invoice prints cleanly.

What Certyn does

  1. Says the run length and starts an explore run with your pages in the goal (app.run.create type explore). The media tool works in runs, not on the chat's own Machine.
  2. Sets a media preset (browser.media.set): dark or light (the system color scheme), reduced_motion or no_reduced_motion, print or screen (the CSS media type), and reset.
  3. Dark mode: looks for text that disappears, dark icons on a dark background, and leftover white boxes. It runs the contrast audit (browser.a11y.check), so contrast is measured. If your app has its own theme switch, Certyn uses it.
  4. Reduced motion: checks that carousels stop and large transitions are removed or calmer. It reads the CSS (browser.dom.get with animation and transition) to confirm.
  5. Print: checks that menus and buttons are hidden, content is not cut off, and the important parts are there.
  6. Resets each setting and files one issue per real bug, with the setting named, for example "Totals invisible in dark mode on Dashboard".

What you get

  • Issues with screenshots and measured contrast where it applies.
  • A run report with each page and setting checked.

Limits

  • Certyn cannot watch an animation play. It judges motion from the CSS and from screenshots taken one after another.
  • The print view is the page with print CSS in the browser. Certyn does not open the print dialog or make a PDF, so page breaks and margins are not checked. Look at a real print preview for those.
  • High contrast (forced colors) mode is not emulated.
  • Chromium only. Safari and Firefox are not checked.