Are You Dark-mode Ready?

• Design Analysis
• Nearly There

{ 🌚 } – Dark mode is everywhere, but are we ready for it?

A future of #CSS that every UI designer and Front-end developer should be aware of. The tale of prefers-color-scheme, a media query of CSS slowly becoming adaptable by all browsers across devices.

Now, Instagram has it. Dark mode on mobile and web are becoming more and more trendy and every big tech like Google, Sketch, Slack, Facebook are pushing it. So in this era of ‘Dark’ mode, are you ready to be the one to adapt?

The Story

I’ve started re-designing my portfolio and I’ve decided to code it manually instead of using readymade platforms. I wanted two primary things in my portfolio: ‘Mobile-first website’(bottom navigation) and ‘Dark mode’(because I love it!) but at the same time as a researcher, I was worried about the dark mode whether it’d get accepted by recruiters and managers or not! I’ve asked a couple of veterans(basically a user-testing of my portfolio) and ran polls across platforms like Twitter, Linkedin and Reddit. The one opinion I unanimously got was “It’s nice to have a ‘Dark Mode’ but it should not be forced on the user!” So, all recommended me to have a toggle option on the site which I’ll have!

The Discovery

Now, during this time I’ve stumbled upon a CSS property called, “prefers-color-scheme” -the property which would fetch preference of the user from their OS and settings and turn the website into the mode accordingly!

Now, this is a property which is in progress and not in the mainstream right now. Browsers are still in the development to accept this but you believe it or not Dark theme will be an essential option for all your projects.

The Developer Side

As a developer, what things you should take care of and what additional efforts you have to put in. Let’s see,

For this, you’d have two separate CSS files for each mode and one main CSS file. The property would have 3 acceptable values: {dark, light, no-preference} to choose from so you have to write 2 separate CSS files for each of the mode containing necessary colour-palettes.

The Designer Side

As a designer, you should stay ahead of the game! Now from your next project try doing these two things(if you’re not already doing it):

1. Name the colours according to standard guidelines.
2. Design individual colour-palettes for each of the mode.

At last, NEVER FORGET THE USER. Always have an option to switch back to Light Mode if your default version is Dark! It’s a trendy but it’s not adaptable by everyone!

The Bonus

Google chrome has advanced feature(if you enable it) for android. If you turn that on then the chrome will inverse the colours automatically if Dark theme option is not provided by the developer. So if you want to provide equal experience to both sets of the users, you should start taking care of it otherwise the auto-inversion of colour may produce some bad results.

Remember: tech is becoming dark, don’t let your life become one!

---

• For more articles subscribe to Phase Magazine Newsletter. 
• Follow Phase on Facebook, Twitter, Instagram, and LinkedIn. 
• Join Phase Community on Slack and our Facebook Group.
  

If you want to contribute to Phase Magazine, write to us here: