Dark Interfaces

Dark Mode Colors

Choosing the right colors for dark mode is crucial. For the background, you can go for neutral colors such as #121212 as recommended by Material Design. You can even use black as the background color. You can experiment with multiple colors to decide on colors that'd match well with the background.

Accessibility and Contrast

While choosing colors, accessibility and contrast play a vital role. The colors of the text and the background should have enough contrast. To check this, you can use tools such as WebAIM or the Material Color Tool.

Dark Mode Magic

If you would like to have a quick preview of how your UI can look in either light or dark mode, you can use this plugin for Figma to quickly convert your UI to Dark or Light mode.

Switor

Switor is a great plugin that helps you to switch between pre-defined color palettes. To use the plugin, you need to create a light color palette as well as a dark color palette, and use those color styles in your UI. The magic of the plugin is that you can switch between collection in two clicks.

Switching light to dark mode with Switor

For this exercise, we will use a plugin called Switor. It is a very interesting plugin which can help you change a color palette to another one. In this case, we have our light color palette. Next, we will prepare our dark color palette, and then I will show you how to set up the Figma file with Switor.

The first step is to install Switor from Figma community section.

Then, let's go back to our Figma file and make sure that the document has pre-defined local color styles. We will use these styles for light mode.

Now, go to the menu bar. Here, click on Plugins and select Switor. On the new window, make sure to be on the Local Style tab, and click on the white button that says Create Theme Palette.

A column of local style colors will be created. Then, select that column and press the ALT key. Drag it to the left and create a copy of it. Let's name the new column Dark.

Change the Dark column set of colors for colors that we will use in the dark version of our UI. Let's change the first rectangle with these gradients: #F83775 and #FE7769, the second rectangle to #D23270, the third one to #373775 and 60% in alpha. Then, set the fourth rectangle to #1F1F47, fifth rectangle to #FFFFFF, sixth rectangle to #000000 and 20% in alpha. Set the seventh and eighth rectangle to #FFFFFF, the ninth rectangle to #FFD1D1. The tenth rectangle to #000000 with an alpha of 20%, and finally the last rectangle to #FFFFFF.

Finally, select each of the colors from the Dark column and click on Change Colors from the Switor window. Voila! You changed your light theme to a dark theme in a couple of clicks. The power of Switor is fantastic; imagine when you need to switch hundreds of screens to dark mode; with Switor you can do it in a heartbeat.

Conclusion

As more and more users switch to dark mode, ensuring that your application has one is good. While adapting your product to dark mode, you've to ensure that the colors you've chosen don't affect accessibility and readability in a negative manner.