fbpx
Skip to content

Dark Mode

Never been easier on the eye

We recently updated the Canadian Mortgage App to support dark mode, and it turned out to be much more complicated than it first meets the eye.
 
At first, we thought it’s a bunch of black and whites or shades of gray batched together as we felt. However, Dark Mode is rich, dynamic, and it’s somewhat crazy when you start coding for it. 

Elevation

Elevation governs what shade of “gray” each view should be coloured depending on where they are, more specifically how high they are in the stack or, in other words, how close each view is to your eye relative to other views.

For example, if you have a black background view, then the next view on top of the background must be “lighter” in its shade, and the view on top of that (say a button) must even be lighter than it’s own immediate background view

Only once all view positions and their elevation have been defined then we can intelligently shade each and develop a beautiful 3D effect just by using grays.

Benefits of using Dark Mode

Dark Mode is ideally suited to low-light environments, where it not only stops you from disturbing those around you with the light from your phone but also helps to prevent eye strain.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Another utility of dark mode we so often heard about is that it cuts harmful blue light. According to a Harvard Health paper, excessive exposure to blue light can suppress the secretion of melatonin, a hormone essential for getting proper sleep at night. It’s not something you should be worried about, though!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
And finally, dark mode will help you save the battery life of your phone!

How to enable Dark Mode

Play Video

Light Mode vs Dark Mode

Behind the Scenes

3D layered view that make up the home screen

In order to develop a refined 3D look in Dark Mode, each view layer had to be assessed for its elevation in relation to other views in the hierarchy.

Quick, easy and accurate
Simply Powerful

Go PRO Now​

apple_en
apple_en
google_play_en
google_play_en

How to get the app

Since you are not glued to your phone (for once), you have 3 options for downloading the app

Text yourself a link

.. and have no fear, we don't save your number.

Scan this QR code and go to the app store

OR check us out on the App Store or Google Play