Skip to main content
Maarten Deckers
Maarten Deckers
Participant
March 26, 2021
Answered

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

  • March 26, 2021
  • 1 reply
  • 4407 views

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.

 

This topic has been closed for replies.
Correct answer Spas K.

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. 

1 reply

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
March 28, 2021

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
    Maarten DeckersAuthor
    Participant
    March 29, 2021

    @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 …

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices