Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Community Beginner ,
Mar 26, 2021 Mar 26, 2021

Copy link to clipboard

Copied

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.

 

TOPICS
How to

Views

591

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Mar 28, 2021 Mar 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 w...

Likes

Translate

Translate
Adobe Community Professional ,
Mar 28, 2021 Mar 28, 2021

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 29, 2021 Mar 29, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines