Mobile App Dark Mode

[deobald]

The original Sketch file is available in the design repo. Viba from Obvious.in and Sankalp (the original designer) have both volunteered to attempt a dark mode design, if they can find time.

[deobald]

@iamsankalp has created some sample colour options for us:

Option 1: Full Black

Option 2: Blue Tint

Option 3: Dark Brown

Since I'm probably the only person in the group with a scleral buckle, macular degeneration, cataracts, no vitreous humor, and lens power approaching legally blind (-13.5), I'll go out on a limb and suggest I might be the best person to evaluate the accessibility of these colours. 😉 From an accessibility perspective, the blue tint is almost certainly the worst option. The dark brown, despite being lighter, feels like it has a higher contrast than the blue tint. The full black option is far and wide the easiest to look at, though.

From an aesthetic perspective, I like the dark brown the best. I do find when I look at it my broken eyes wish it was darker. I'm not sure if that's an option, @iamsankalp ?

[iamsankalp]

Yep @deobald, Option 3 should be darker ideally. I'll get to try it out sooner.

[deobald]

@iamsankalp - I have checked with @brihas and he says that we can proceed with Option 1 (full black). You're welcome to experiment with a darker Option 3 if you are so inclined but otherwise the next step could be to apply the Option 1 colour scheme to one or two more complicated wireframes to ensure it doesn't conflict with the overall colour scheme (if you feel that's necessary). If it doesn't conflict, we can try applying the colour palette to the Flutter codebase. :)

[iamsankalp]

Hi! I got to try out 2 more screens and have mapped out a translation of colours from light to dark. Please check the images for reference.

I suggest we start with this and let me know if we encounter any issues in between.

[deobald]

This is brilliant, @iamsankalp ! Thank you so much for your work on this. I'll close this issue and reference it from inside a mobile app issue for the dev team.

[VarunBarad]

@iamsankalp The complete black option 1 looks awesome 😍. Special thanks for providing the translation from light colors to dark 🙏