How should buttons be designed in Dark Mode?

Button toggle dark mode

I recently had a project that my employer wanted the app to have a dark mode, this was the first time I designed a dark mode. of course, I overcame some challenges. Which I want to share with you in this article.

First of all, I suggest you read the basic rules of Dark Mode in Material Design.

As we know, the appearance of the buttons is very important in the design and this importance is multiplied in the dark mode, because we have to design according to the persona and the conditions in which the user is likely to be in that position, such as high ambient light, lack of focus when Working with applications, etc.

It is better to divide the buttons into four categories so as not to be confused in the design:

1. Positive buttons: The buttons we want to encourage the user to click and the growth of the business depends on these buttons.
2. Positive to neutral buttons: Buttons that have a relatively important load, such as the registration and login button, these two buttons are important to us, but one is more important than the other (usually in the designs, these two are shown in a CTA button and are separated in the registration and login page)
3. Neutral buttons to warn: These buttons do not have a positive charge and are only for informational purposes; what does it mean? For example, when we show a modal to the user, but the buttons that are to be designed do not do much.
4. Warning buttons: These categories have a negative charge and are important to us. For example, when a user wants to log out of their account, a warning is displayed as to whether you Are sure you want to log out? In my opinion, it is equal to the positive button in terms of importance.

These categories further help us to select the colour of the buttons and their display mode
Also, it is better not to design the Disable buttons with grey colour and consider the darker state of the Primary colour.

A variety of button modes

In terms of colour, you should be careful that not all warning buttons are red. You can use the contrasting colour of the Primary colour of the project. For example, the colours of my project were orange, yellow, turquoise and dark blue. For the colour of the Primary buttons, I used orange and yellow, and for the secondary colour and warning, I used dark blue and cyan, which are contrasting colours in the colour cycle.

Colour palette

Let me explain one point; Because the employer insisted that orange and yellow were the colours of their brand, I made these two the Primary colours. But in Light Mode, I used yellow and dark blue and in Dark Mode, I used orange and turquoise because the ability to distinguish and differentiate them is easier.

Let me say a few things about Dark Mode design:

1. In Dark Mode, because the colour is dark, it also makes the space smaller, so less and optimal content should be used. (Less is more.)
2. If you look closely at the picture above, the size of the buttons in the dark seems to be larger, this is due to a visual error, so you should be aware of this point as well.
3. To improve the appearance of the app, you do not necessarily need to set the background to black. You can also use other colours such as navy blue, jade, etc., provided that there is no visual noise with other colours and use its darkest state.
4. Be loyal to the original identity of the product; The smallest details such as icons and images should express the purpose of the brand. It should not be the case that Dark Mode and Light Mode have two completely different appearances.

This article ends here, but here are two links about the importance of Dark Mode

Dark Mode vs. Light Mode: Which Is Better?

8 Tips for Dark Theme Design

Thank you for being with me, leave me a comment and follow me on other social networks through this link.