Skip to main content
Home/Recipes/Dark mode analysis
Extraction

Dark mode analysis

DeveloperQADesigner

Overview

Extract both light and dark mode token sets. Compare them to verify that dark mode is a proper inversion, not just a color swap that breaks spacing, type, and component density.

The --dark-mode flag launches the browser with the prefers-color-scheme: dark media query active, extracting the token set as rendered in dark mode. Running two extractions, one without the flag and one with, produces two JSON files that can be loaded side-by-side in the Dembrandt App. This reveals whether dark mode is a complete, coherent implementation or just a surface-level color inversion that misses spacing, typography weight, or component density adjustments.

Extract light mode

Terminal
dembrandt vercel.com --save-output

Extract dark mode

Terminal
dembrandt vercel.com --dark-mode --save-output
Output

Two token files. Load both in the Dembrandt App to diff them side-by-side.

More in Extraction

Basic token extractionMulti-page crawlScreenshot + token visual auditDTCG export to Tokens Studio or Figma VariablesExtract and merge tokens across key pagesRaw vs. filtered color analysisExtract Cloudflare-protected sites with FirefoxExtract authenticated views via CDP

Browse all

All recipes →

52 workflows

Continue reading

Getting started

Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.

Read more

MCP

Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.

Read more

Skills

30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.

Read more