How to Keep a Dark-Mode and Light-Mode Pair

Product UI now ships two skins. Specs that show only light mode get built wrong in dark, and marketing that shows only dark mode fails on a white landing page. The pair has to travel together: two variants, two files, or two token blocks. Windows clipboard history stores 25 unrelated items. It has no concept of a pair. Unpinned items vanish at restart. A 1440p screenshot often misses the 4 MB history cap.

Treat "light + dark" like @1x + @2x: a naming contract, not two accidents.

The system of record is variants or tokens

Figma. Official variants: group related components in a component set (Ctrl+Alt+K, then add a variant property). A property named Theme with values Light / Dark is the documented pattern — Figma does not require that name, but variants exist specifically to keep states together. Instances swap. Two unlinked frames named home and home-dark will drift.

Variables / semantic color (color/bg/page mapped to different collections for light and dark) are the scalable version. Official library guidance: publish so other files consume the same tokens. When Figma Components Replace Copied Assets. Color Palettes: Hex Lists vs Visual Swatches.

Code. Two theme objects or CSS variables. The Figma pair must match the code pair. A screenshot is evidence, not the theme.

Adobe / marketing. Two exports from the same artboard setup, or two library colors. Creative Cloud Libraries can hold both ramps as named colors. They still need names (cta/bg/light, cta/bg/dark).

The working pair on disk

When someone needs pictures (QA, App Store, a deck):

settings-account-light.png
settings-account-dark.png

or a single stack folder:

settings-account/
  light.png
  dark.png

Export both from the same frame size. Figma Export: two frames or one frame with a theme variant visible, then the other. Official export settings cover scale. For store screenshots, use the pixel size the store's current help requires — not a random 2× paste. Exporting @1x and @2x Without Losing the Pair is density; this article is theme. Density × theme can be four files. Name all four.

Presentation Designers: Slide Exports Into a Deck — insert both pictures on the comparison slide; do not paste one from Win+V and forget the other.

Token list that pastes

# light
color/bg/page        #F7F5F2
color/text/primary   #1A1A1A
color/cta/bg         #0B6E4F

# dark
color/bg/page        #121212
color/text/primary   #F3F3F3
color/cta/bg         #3DDC97

Copy the whole block when implementing both themes. Pin it for the week. This is the one Win+V object that represents the pair honestly, because it is text and well under 4 MB.

Do not pin twelve swatch PNGs. Color Palettes: Hex Lists vs Visual Swatches.

Contrast is a pair problem

WCAG contrast is measured per theme. Light text on light backgrounds is the usual dark-mode bug. Keep the pairs in the list (text/primary on bg/page for each theme) and check both. A single pretty strip of the light ramp will not catch it.

Capture mistakes

• Win+Shift+S of a half-toggled UI (some surfaces still light) — not a theme pair
• Copying only the dark marketing still because it looked cooler
• Figma Copy as PNG of one variant (2×) and a 1× export of the other — different pixel sizes on the comparison slide
• Pasting into Figma web versus desktop with different bitmap fidelity — Figma Desktop vs Figma Web: Paste Behavior Differs
• Using a Slack preview of dark mode in the App Store listing — Avoiding Compressed Chat Images in Final Decks

Export both, same scale, same crop.

Photoshop and marketing art

If the pair is a campaign key (light billboard, dark OLED social), they are two artboards with shared marks from the brand folder. Keeping Brand Assets Off the Desktop and On a Shelf. Best Clipboard Setup for Photoshop Users. Do not Copy Merged one and "invert" the other in history.

Canva Brand Kit can hold both color sets if the team is Canva-native. Download both sizes. Canva Desktop vs Canva Web Clipboard Limits.

Handoff

Engineering should receive:

• Token names, not only hex
• Both ramps
• Optional paired screenshots for visual QA
• Component variants, not two detached PNGs as the only spec

How to Hand Assets to a Developer Without Slack Soup.

A hover shelf that groups two files is the clipboard-shaped version of the pair. Edge-Drop can keep light.png + dark.png as one drop into the ticket. Win+V cannot glue them. If the design system already has theme variables, that beats any shelf.

Brand Guidelines PDFs Do Not Belong in History — a 40-page PDF that mentions both themes is still a file. Pin a shortcut or a path, not the PDF bytes.

Checklist

• Theme is a Figma variant property or a variable collection
• Token file has both ramps
• QA screenshots exported as a named pair, same pixel size
• Decks insert both files
• Win+V holds the text block, not twelve bitmaps
• Friday unpin

Worked example: Settings screen for App Store plus engineering

1. One Figma component Settings/Account with variant Theme=Light|Dark
2. Variables: color/bg/page bound to light and dark collections
3. Export settings-account-light.png and settings-account-dark.png at the store's required pixel size
4. Token block committed with both ramps
5. Comparison slide in the pitch deck inserts both files
6. QA checklist includes contrast for each theme
7. Win+V holds the token block during implementation week, then unpins

If marketing only wants the dark shot, still archive the light export. The next localization pass will ask for it.

Troubleshooting

Light and dark are one product. Keep them in one set. The clipboard can hold the hexes. It cannot hold the relationship.

Windows limits for a theme pair

History has no pair type. Two screenshots are two slots. They evict independently. One may exceed 4 MB and never appear. After restart only pins remain, and pins are unlabeled.

The token text block is the pair that history can actually hold. The Figma variant set is the pair that product can actually maintain. Export both PNGs at the same scale when a picture is required. Do not leave "the other theme" as a memory of a hex.

App Store and Play screenshots are a common place the pair splits. If the store listing shows only dark mode, the light-mode phone user sees a product they do not recognize. Export both, even if marketing picks one hero. QA devices should be checked in both system themes. A single clipboard grab of whichever theme the designer's laptop was in is how the other theme ships untested.

Elevation, borders, and hairline dividers often fail only in one theme. A light-mode divider at 8 percent black disappears on dark gray. Keep those decisions in tokens (color/border/subtle) with both values filled in. A swatch PNG of the light ramp will not catch the missing dark border. The paired token list will.

If the product also has a high-contrast accessibility theme, that is a third column, not a clipboard surprise. Name it, export it, and keep it with the other two. Three files still beat twenty-five anonymous bitmaps. Document which theme is the marketing default so social crops do not mix skins in one carousel. The same naming contract then feeds the store listing, the deck, and QA without anyone guessing hexes from memory or from a leftover Win+V pin.

The product-level comparison is Working From a Tablet on Windows: Pencil vs Clipboard.

Related reading

• Brand Guidelines PDFs Do Not Belong in History
• Working From a Tablet on Windows: Pencil vs Clipboard
• Best Clipboard Setup for Photoshop Users
• Best Clipboard Habits for Developers in 2026

Sources

• Create and use variants (Figma) — official way to group light/dark as one component set.
• Guide to components in Figma — libraries and instances versus copied screenshots.
• Export formats and settings for static designs (Figma) — same scale for both exports.
• Using the clipboard (Microsoft Support) — 25 unrelated slots; 4 MB; restart wipe.
• How to use clipboard history in Windows 11 (Microsoft) — pin the token text, not a theme.
• Copy and paste objects (Figma) — Copy as PNG at 2×; do not mix scales across the pair.

Copy. Stack. Drop.

Transform your clipboard into an interactive edge shelf. Stack, pin, and drag assets into any app with zero friction.

Download for Windows Get from Microsoft Store

How to Install Guide · First 10 Minutes Guide · Drag & Drop Guide · Edge-Drop vs Win+V · Support