What is the best way to design both a light and dark theme in XD?

[Maarten Deckers]

Hi,

Could you give me some advice on how to efficiently design both a light theme and a dark theme in XD, please? My current situation: I started on the Light mode and designed a bunch of wireframes using assets from a linked UI-kit (also in light mode). Now I would like to replicate all of this in Dark Mode. Is there a best practice to speed up this process?

1. Are light and dark modes commonly designed within the same XD document? (Thus having to duplicate every single character style or component, change their appearance and give them a new name (for instance including "dark", like they did in the XD Material Design kit)? Followed by a do-over of all wireframes?
2. Or is there a way to make it work by duplicating both Light Mode XD-documents (1-UI-kit, 2-Wireframes) and turning them into Dark mode designs. Thus ending up with 4 documents and the hassle of having to make client changes in both sets.

[Spas K. · Accepted solution]

Unfortunately, there isn't an easy or automated way to do this. I normally design the whole app in light or dark mode (whichever is dominant or more important), and then make the design system or a few artboards with major elements in dark mode to show the devs what the colors would be.

In your case you would have to duplicate all the elements and make the color corrections manually. To make this a bit easier, you can duplicate the document, and make color edits from the assets panel, so you will change all elements in white to dark grey for example.

In terms of linking everything together, you cannot point to a separate prototype from within another, so your only choice if you want fluid switching is to put both dark / light mode artboards in the same document, which would mean making all connections twice and linking each page to its dark/light counterpart. 

[Maarten Deckers]

@Spas K. Thanks you for taking the time to answer my question. I'll try it your way and design a few major artboards in dark mode to give the devs a clear view on how the dark colors should be. A find/replace colour function would come in handy …