Check dark mode colors on Mac from screenshots
A dark mode screenshot is useful evidence only when you treat it as a rendered state. Sample it locally, name each color by role, compare it to the light mode state, and keep private UI on your Mac.
To check dark mode colors on Mac from screenshots, capture the same UI state in light mode and dark mode, open both screenshots at actual size, sample the rendered pixels locally, and name every value by role before you copy or export it.
The screenshot is not automatically the design truth. It can show opacity, antialiasing, a selected state, a disabled state, a material background, or a browser rendering quirk. That makes it useful evidence, but only if the handoff says what state it came from.
Disclosure: I build teenycolor. This workflow uses TeenyColor because its source supports the native macOS sampler, sRGB output, nine copy formats, local history, pinned colors, custom names, and palette export. Apple's Digital Color Meter is still fine for one-off inspection.
Quick answer
| Step | What to do | Why it matters |
|---|---|---|
| Capture the same state | Take light and dark screenshots of the same component, screen size, and UI state. | The comparison is about appearance, not different content. |
| Open at actual size | Avoid sampling a scaled preview when a pixel-level value matters. | Resizing can blend nearby pixels and produce a misleading value. |
| Name by role | Use names such as card background, selected row, focus ring, and disabled label. | The receiver knows what each color is supposed to do. |
| Pin only keepers | Pin final light and dark values; leave experiments in normal history. | The export stays small enough to review. |
01Capture matching light and dark states
Do not compare a normal light mode screenshot to a selected dark mode screenshot. Capture the same state: default, hover, focus, selected, disabled, empty, loading, warning, error, or success.
macOS screenshots are easy to take, but the QA step starts before the keyboard shortcut. Set the appearance you want to test, open the same screen, and include enough surrounding UI to identify the component later.
If you are checking a menu, popover, or temporary state, capture it immediately and label the file. A screenshot called dark-selected-row-settings.png is more useful than Screen Shot 2026-05-29 at 9.14.22 AM.png.
02Sample the rendered pixel, then name the role
Open the screenshot at actual size and sample a solid part of the color. Avoid antialiased text edges, transparent shadows, blurred material backgrounds, image compression artifacts, and the border between two colors.
TeenyColor uses macOS NSColorSampler, converts sampled values to sRGB, and copies the selected output format to the pasteboard. It also stores local history, so you can sample several dark mode states without losing the earlier values.
Name the sample before it leaves your Mac. Use role and state names: dark card background, dark primary label, dark disabled label, dark focus ring, dark selected row, dark warning icon. The name is the difference between evidence and clutter.
03Compare dark mode against the matching light mode role
The useful comparison is role to role. Compare light card background to dark card background, light label to dark label, light focus ring to dark focus ring. Do not compare every dark color to white, black, or a brand accent out of context.
Apple's interface guidance favors adaptive colors and separate light and dark variants for custom colors. A screenshot review should respect that. You are checking whether the state rendered correctly, not whether dark mode is a literal inversion of light mode.
For a broader handoff checklist, use the TeenyApps hub on Mac dark mode color QA. This article focuses on the screenshot sampling part.
04Use history for raw samples and pins for review values
Dark mode QA creates throwaway samples. You will pick the wrong edge, sample the wrong state, and collect a few values you do not need. That is normal. Keep history messy and pins deliberate.
TeenyColor lets you pin colors so important values stay at the top. Its homepage describes configurable history limits of 20, 50, or 100 unpinned colors. Pinned colors do not count toward that cleanup limit.
Pin the values that belong in the review: the final foreground, background, border, focus, and icon colors for the state you are checking. Leave the experiments unpinned so they can age out.
05Export only the values someone can act on
TeenyColor can export picked colors as text in the current format or as JSON with hex, RGB, HSL, and optional names. Use text when the next stop is a short issue comment. Use JSON when another tool or teammate needs structured values.
Do not export every screenshot sample. Export the named values that answer a review question: which dark mode state failed, which values were sampled, and what should be checked next.
If the next step is contrast, move the named foreground and background pair into a contrast checker. If the next step is choosing a replacement shade, send the base value and the state that failed.
Dark mode screenshot checklist
- Capture the same component state in light mode and dark mode.
- Open each screenshot at actual size before sampling.
- Sample solid pixels, not antialiased edges, shadows, or blended borders.
- Name every sampled color by role and state.
- Pin review values and leave throwaway samples unpinned.
- Export text for short handoff notes or JSON for structured review.
- Pair foreground and background values before checking contrast.
- Keep unreleased UI screenshots local unless collaboration requires sharing.
Common dark mode screenshot traps
| Trap | What goes wrong | Better move |
|---|---|---|
| Sampling a scaled preview | macOS or the image viewer can average nearby pixels. | Open the screenshot at actual size before sampling. |
| Sampling text edges | Antialiasing blends the glyph with the dark background. | Sample a solid fill area or use the source value when available. |
| Comparing different states | A selected dark row and a default light row are not the same role. | Compare role to role and state to state. |
| Exporting every sample | The review turns into a pile of unnamed colors. | Name and pin only the values the reviewer can act on. |
Sources checked
- TeenyColor feature claims were checked against the TeenyColor homepage and local Swift source for
NSColorSampler, sRGB conversion, pasteboard copy, nine output formats, history, pinned colors, custom names, text export, and JSON export. - Apple Support: Take a screenshot on Mac.
- Apple Support: Digital Color Meter User Guide for Mac.
- Apple Human Interface Guidelines: Dark Mode.
- Apple Human Interface Guidelines: Color.
- TeenyApps Mac dark mode color QA checklist for the connected handoff workflow.
FAQ
Can you check dark mode colors from a Mac screenshot?
Yes. Open the screenshot at actual size, sample the rendered pixels with a local Mac color picker, name each sampled color by role and state, then compare the values against the light mode screenshot or design tokens.
Why do dark mode screenshot colors differ from design tokens?
A screenshot can include opacity, vibrancy, antialiasing, material backgrounds, browser zoom, image compression, and a specific UI state. It is evidence of what rendered, not always the source token.
Should dark mode screenshots be uploaded to online color tools?
Private product screenshots, client UI, internal dashboards, and unreleased designs should stay local unless collaboration requires sharing. A color value can usually be sampled on the Mac without uploading the image.
Keep dark mode color checks local.
teenycolor samples screen colors, copies nine formats, keeps local history, supports pins and names, and exports review-ready palettes from your Mac.