Menu

Dark Mode Guidlines

Home / Blog

dark theme guidlines

Dark Theme Guidlines

Colour, accessibility and UI for card based design.


Design is about functionality! Accessibility is something I never skip, especially for a dark mode design. Not everyone may feel more comfortable, less tired and more focused while using Dark Mode. Designing for a dark background requires specific accessibility guidelines to consider. I was leading the design of Dark Mode for BlackBerry HUB+ prodcuts. Including secure apps suite like; Secure Inbox, Calendar, Notes, Tasks, Password, Battery Power Center & other Guardian Security apps. And responsible for creating Design Guidelines that has the right colour tones for the different elements in card based design.


Dark Theme Challenges



Goals



Dark Mode UI

Dark Mode UI

Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security focused apps.


Dark Mode Code

Dark Mode UI

Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security focused apps.


Color contrast and tones used on a dark theme are vital for all users but especially for people with poor vision or disabilities. Users must be able to perceive content. This is why colors selected for text and icons need to be contrasted, readable and carefully used if there are gradients, semi-transparent colors, and background images. Everything has to be designed carefully and meet the contrast requirements.


I was testing and exploring different variations with essential consideration for the various content levels on a dark mode. Especially with a card-based design where shadows cannot be perceived the same as with the light theme. I have been experimenting with different shades of grey that can help to communicate visual hierarchy—avoiding using 100% black because pure black is too hard on the eye.


Dark Mode UI

Dark Mode UI


While creating the Dark Theme Guidelines for BlackBerry Products, I also had the opportunity to investigate the different aspects and challenges of accessibility. Dark mode may be the next hot design feature but can also create many accessibility issues. For some people, dark themes are more accessible, for others, the light theme would be preferable. The bottom line, users need to have personalization. And have both a dark theme and a light theme and allow users to select the theme that works best for them. Make switching between dark themes and light themes obvious and easy to find. The goal is to create products that will be easy to use, accessible for everyone and effective.


Dark Mode Code


Read my exploration about Dark Mode Design


View some of the other Design Guidlines I was creating for BlackBerry Products