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?
Copy link to clipboard
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.
@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 …