How to Manage Light and Dark Mode Assets in Figma

The cleanest way to manage light and dark mode in Figma is with color variables in one collection that has two modes, Light and Dark. Apply the variables to your designs once, then switch any frame or page between modes instead of keeping duplicate frames that drift apart. Use component variants only for things that genuinely differ by theme, such as a logo or an illustration, and export light and dark versions as a named pair at the same size.

Set up Light and Dark modes with variables

Variable modes let one variable hold a different value for each context; for themes, each mode stores the light or dark value of every color. Modes are available on Education, Professional, Organization and Enterprise plans, and the number of modes per collection depends on your plan.

1. Click Variables in the left navigation bar and open (or create) your color collection.
2. Create color variables named by role, such as bg/page, text/primary and cta/bg.
3. Click New variable mode next to the column headers. Figma copies the first column's values into the new mode.
4. Rename the modes Light and Dark, then change the values in the Dark column.
5. Apply the variables to fills and strokes in your designs.

You can also right-click a mode header and choose Duplicate mode to start a new mode from an existing one.

Switch a frame or page between modes

• A frame or other object: select it, click Apply variable mode in the Appearance section of the right sidebar, hover over the collection and choose a mode.
• A whole page: deselect everything, then use Apply variable mode in the Page section of the right sidebar.

Objects default to Auto, which uses the mode of the nearest parent that has one set, or the collection's default. So setting the mode on a top-level frame switches everything inside it, unless a child has its own mode set.

Name tokens by role, with both values

Role-based names are what make a theme switch work: text/primary can be near-black in Light and near-white in Dark, while #1A1A1A can only ever be one color. Keep a text version of the pairs for reviews and handoff:

token            Light     Dark
bg/page          #F7F5F2   #121212
bg/elevated      #FFFFFF   #1E1E1E
text/primary     #1A1A1A   #F3F3F3
text/muted       #5C5C5C   #A3A3A3
cta/bg           #0B6E4F   #3DDC97
border/subtle    #E6E1DA   #2E2E2E

How to store a color palette covers writing and maintaining lists like this. Figma can also export a mode or a whole collection to a JSON file, which is a more reliable handoff to code than retyping values.

When to use variants instead

Variables handle colors and other values. Some assets differ by theme in ways a color swap can't express: a logo with a different lockup on dark backgrounds, an illustration with different lighting, a product screenshot. For those, make a component with a variant property, for example theme with the values light and dark (create the component with Ctrl+Alt+K, then add the variant). Swapping the instance's property then swaps the art. Game UI icons use the same pattern for states such as normal, hover and disabled; see a game UI icon workflow from Figma to Unity and Unreal. When Figma components replace copied assets explains the wider pattern.

Export light and dark screenshots as a pair

When someone needs pictures of both themes (QA, app store listings, a pitch deck):

1. Duplicate the frame, or keep one frame and switch its mode between exports.
2. Set one frame to Light and the other to Dark with Apply variable mode.
3. Give both the same export setting, for example PNG at 2x.
4. Name them so they sort together:

settings-account_light.png
settings-account_light@2x.png
settings-account_dark.png
settings-account_dark@2x.png

Export both themes at the same scale and crop so they line up side by side. Combining density and theme gives four files per screen; how to export @1x and @2x images covers the density half.

Check contrast in both modes

Contrast has to pass in each theme separately: a muted text color that reads well on a light background can fail on a dark one. WCAG 2.2 asks for at least 4.5:1 for normal text and 3:1 for large text. Check each text-and-background pair in both columns of your token list, not just the light one.

Hand off both themes

Developers need the token names with both values, the variable collection (or its JSON export), and links to frames in each mode. In Dev Mode they can see which variables a layer uses. How to hand off design assets to developers has the full checklist.

Where the clipboard fits

A pair of exports is two files, and Windows clipboard history (Win+V) stores neither files nor file names, only text, HTML and bitmaps. The token list is the part that suits the clipboard: copy it as text and pin it in Win+V while you implement both themes.

To keep the two exported images together while you place them in a deck or a ticket, Edge Drop can merge them into one stack by dragging one card onto the other, then drag the pair out together.

FAQ

Can I have more than two modes, such as a high-contrast theme?

Yes. A collection can have more modes; how many depends on your Figma plan. A third theme is another column of values, not another set of frames.

Do I need a paid Figma plan for light and dark modes?

Variable modes are available on Education, Professional, Organization and Enterprise plans. Without them, use component variants or separate color styles for each theme.

Why didn't my frame change when I switched modes?

Either the layers use fixed colors instead of variables, or a child layer has its own mode set instead of Auto. Check the fills, then the mode setting on nested frames.

Related reading

• Hex List or Swatches? How to Store a Color Palette
• How to Hand Off Design Assets to Developers (Checklist)
• When to Turn Copied Elements Into Figma Components
• Alt Text in Design Handoff: Keep It With the Image

Sources

• Modes for variables (Figma Help) — creating and applying modes, Auto inheritance, plan availability, JSON export.
• Create and use variants (Figma Help) — component sets, variant properties, Ctrl+Alt+K.
• Export formats and settings for static designs (Figma Help) — export scales and file name suffixes.
• Guide to Dev Mode (Figma Help) — inspecting applied styles and variables.
• Understanding SC 1.4.3 Contrast (Minimum) (W3C) — contrast ratios.
• Using the clipboard (Microsoft Support) — clipboard history formats and pinning.

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