Oct 02, 2019 • ☕️ 5 min read
Your Mac is dark! Your phone is dark! Your VSCode is dark! Your Twitter is dark! The whole internet is dark 🌒. “Huh! so what! I’m not adding Dark Mode to my sites”, you said 💪.
One month later, your roommate saw you were searching Google: “What is Dark Mode”, “Pros and cons of Dark Mode”, “How to add Dark Mode to Gatsby website”, “Is it necessary to add Dark Mode”, “Benefits of Dark Mode”. You were deep in thoughts 🤔
You don’t know whether Dark Mode is overhyped or necessary but you know there is a real temptation of adding it to your sites.
I remembered very long ago I was using MS-DOS to code Pascal, it was the first time I actually used dark theme in an operating system. This was a matter of technology limitation not a matter of design, we had no choice but to use black and white interfaces.
Since the inception of monitors with multiple colors through the use of red, green, and blue phosphors, there has been a dominating trend of designing colorful interfaces on white background.
The Dark Mode trend has started recent years when more and more people using phones and tables in their beds at night-time. The design reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.
Dark Mode becomes hugely popular when operating systems like iOS, Android and MacOS support it. Developers have been adding this feature to their apps and website to stay competitive.
Instead of featuring a predominantly white background with black text, the typical dark mode displays a black background with white or colored text.
This report says 80 percent of American adults report using digital devices for more than two hours per day with nearly 67 percent using two or more devices simultaneously, and 59 percent report experiencing symptoms of digital eye strain.
Night is dark, screen is dark, eyes not hurt — Dark mode is an eye-friendly alternative to the traditional blindingly bright user interfaces sported by most apps, sites, and platforms. So switching to dark mode not only saves your eyes but can also make you feel less tired and more healthy in general.
Battery saving — Many sources confirmed that using dark mode on OLED screens has been a huge help for battery life of smartphones. On an OLED screen, each pixel lights up individually. If a pixel isn’t displaying a color, the light stays off and the pixel shows up as black.
Perception of elegance and prestige — Dark colors are usually associated with elegance and mystery. Black is often associated with elegance, formality, prestige, and power. That’s why many powerful brands build their visual presentation around a black-and-white scheme.
Better accessibility for users sensitive to bright light — Some people have photophobia, which can cause bright light to trigger migraines. Dark mode could help these people.
Focus more on content — Dark mode focuses content by reducing visual distractions and accentuating important content on complex interfaces. This is also why most developers like to code in dark interfaces or dashboards on car tend to have dark backgrounds.
Coders have used black backgrounds for decades
Your choices of color are hugely restricted — Dark interfaces typically need brighter colors to stand out against the background and as a result, multi-colored media also tend to look better against light interfaces.
Maybe incompatible with your brands — As a result of previous drawback, your color palette is limited; Dark interface may not align with your product’s existing branding.
Difficult to read in light environment — When you are using a device in a well-lit room or in direct sunlight, text positioned on dark backgrounds can be difficult to read.
There are many popular services that support dark mode, many developers support Dark Mode in their personal blogs; There’s a real temptation inside you to implement this feature 😏
- Operating systems: Windows 10, Mac OS Mojave, Android Q - Chat services: Facebook Messenger, Whatsapp, Viber, Skype, Slack - Productivity tools: Todoist, Weekdone, Notion, Trello - Browsers: Google Chrome - Social media: Twitter - More at darkmodelist.com
Do you really need Dark Mode? Actually it’s hard to decide! You must answer a bunch of questions before hopping on it
There are a lot of pros and cons to having a dark mode and it is important to carefully weigh the decision to implement one. However, if you have the time and resources, it wouldn’t hurt to follow this new trend that may attract prospective users to you.
It’s a YES from me! I think 🌒 is cool and I 💙 it.
The only reason not to implement a dark mode is if you 100% sure that your users are using it only in a day time. Doing user and competition research gives the basis for choosing effective and attractive design schemes. You don’t want to do something unnecessary or left behind the herb.
I recommend you to think about the way of how to have the ability to switch to dark mode automatically when the time is right.
It’s also recommended to automatically activate Dark Mode based on operating systems preferences (Operating systems that support a dark mode or dark theme typically have an option to activate it somewhere in the settings) or browser preferences (Use prefers-color-scheme media query).
People prefer slightly darker white text, slightly less vibrant and brilliant images, inverted vector graphics and icons, smooth transitions between modes.
Allow users to opt-out — Dark mode is an aesthetic choice for most users. In consequence, some users may actually like to have their operating system UI in dark, but still prefer to see their webpages the way they are used to seeing them.
There is no doubt Dark Mode is trending for now; We don’t know when it’ll fade away but it’s a nice option to have.
Think hard before supporting Dark Mode, you might be killing your pet products working just fine with colorful design, and allow users to opt-out if you supported.
The choice of whether to enable a light or dark appearance is an aesthetic one for most users, and might not relate to ambient lighting conditions. (Apple)
That’s it! Welcome to the Dark World 😁
An overview look at core CSS topics that help you ace the frontend interview
What high-level programming languages currently can use WebAssembly as a compilation target
Prerendering is a rendering strategy when you pre-render your client-side rendered applications to feed crawlers better
JWT is an open standard for creating compact and self-contained JSON-based object for transmitting an assertion between parties