Enter Night mode ššāØ
It is with great pleasure that we can share Tempo Night mode is finally here.
Who asked for it?
Well, a lot of you actually. After Tempo Mobile, Night mode has been our most heavily requested feature by users. In fact, one of the reasons Leo Bernard ended up joining us as a developer was his interest in bringing Night mode to Tempo.
What took so long? :P
Funny you should ask. A combination of our own strict design philosophy and a lack of standards from Apple meant that this has been a(nother) labour of love from our end.
Bringing it to life meant working on more than 380 files and changing approximately 10,000 lines of code. We truly mean it when we say that we are glad it is finally out in the world and we could not be more thrilled with the result.
We thought weād mark this momentous milestone by asking Leo and our product designer Casper Lourens to talk us through the decisions and thought processes that have shaped Tempo Night mode.
The theme
āWhen designing the colour scheme for Night mode, we decided to pick a theme that blends in well with the native apps but doesnāt follow Appleās guidelines to the letter,ā says Casper.
āWe even went as far as creating a āproving groundā in the design file, so we could see how different colour schemes would hold up.
āJay Keeree helped to retrace the current illustrations, so they work with the dark background. We also made sure that our new dark colour scheme meets accessibility standards from the get-go.
āThe internal name for the colour-theme is āBerlinā. Being the European capital of techno and nightlife, we thought it reflected the colours well, while our HQ is located there too,ā says Casper.
āThere are some small details going beyond the colour palette. My favourite one is the sound effects, which weāve pitched down to match the darker moody look of Night mode.
āWeāve also include a switch to revert back to Light mode when youāre viewing an email that doesnāt look good. To not blind you when you hit the switch, we slowly transition colours, so your eyes can adjust,ā says Casper.
Implementation challenges
āImplementing Night mode meant going through every component of the app and consolidating the existing colours into named ones that we could then create a dark scheme for. There were lots of colours that were so close to each other that we could simplify them into one,ā says Leo.
āHereās what the light theme looks like:
āAnother interesting challenge was having a way to handle emails that donāt support Night mode, because we donāt want our users to be blinded when they open a light mode email at night ;)
āFor that, Iāve implemented an algorithm that automatically converts the emailās colour scheme to a dark one. It works most of the time, and for the exceptions where it doesnāt work well, we have included a little toggle that allows you to view the email in its original colour scheme.
āLuckily, more and more newsletters and transactional emails support Night mode natively,ā says Leo.
Blood, sweat and Night mode
āHaving such a strict design philosophy, the lack of standards from Appleās side on implementing a dark themed UI caught me off-guard. There are many blanks designers need to fill themselves when designing a dark theme, and it shows as dark mode apps feel less uniform compared to light mode,ā says Casper.
āIāve never designed a night-mode app before and it did feel like I needed to adjust my ways. Especially for creating elevation, you canāt rely as much on using shadows as youāre used to be when working a light-theme.
To avoid creating unnatural looking dark themed designs, youāll create contrast by pretend thereās a light source, lighting up any surface that moves closer to it,ā says Casper.
We are immensely proud of what the team has accomplished with and hope that you cherish this long awaited feature as much as we do. But why listen to us telling you about it? Why donāt you go ahead and try out Night mode for yourself. Or stick to Light mode! As we like to tell our users: the choice is yours.
