3 min read
Dark Mode: The must-have feature for publication websites
Dark mode is rapidly emerging as a UX best practice. In this article, we'll delve into why it's essential to embrace dark mode, whether you're designing for a blog publication, a desktop interface, or a mobile platform.
Please just have a dark mode
Whenever I encounter an app, website, or publication that lacks dark mode, I can’t help but wonder: “Why not?“.
In addition to the fact that a light theme illuminates the room at night and disrupts someone’s sleep, let’s explore other benefits of dark mode:
-
Reduced Eye Strain: Dark mode is easier on the eyes, particularly in low-light conditions, as it reduces the amount of emitted light and minimizes glare.
-
Improved Battery Life: It conserves energy, especially on devices with OLED or AMOLED screens, which can result in longer usage between charges.
-
Enhanced Readability: Text and content often appear more distinct and easier to read against dark backgrounds.
-
Accessibility: It can be more accessible for users with certain visual impairments due to increased contrast.
-
Aesthetic Appeal: Dark mode offers a sleek and modern design that many users find appealing.
-
Focus and Productivity: It can reduce distractions and improve concentration, particularly during nighttime use.
-
Trendiness: Dark mode is a current design trend and meets user expectations.
-
Consistency Across Platforms: Maintaining a consistent user experience across devices and platforms.
-
Potential SEO Benefits: It can enhance user engagement and encourage longer session times on websites and apps.
Manual or automatic?
Personally, I would prefer an automatic (in other words, system setting). Most of the users who use dark mode usually have this schedule set up to switch to dark mode and back. In real-life situations, for me, it seems redundant to have this manual switcher (for example, you can become blind trying to find this selector while opening a light-themed site at night).
As a universal alternative, the system setting can be the default one with the ability to force a particular mode.
Implementation
Automatic
For using system setting we can use prefers-color-scheme css media to write styles when browser detects dark mode.
.theme-a {
background: #dca;
color: #731;
}
@media (prefers-color-scheme: dark) {
.theme-a {
background: #753;
color: #dcb;
outline: 5px dashed #000;
}
}Automatic with Tailwind
If you use TailwindCSS, automatic dark mode is easy to setup: just write classes with prefix dark:. For example:
<div class="bg-white dark:bg-black">...</div>Manual
Manual dark theming can be implemented just by adding a class to <body> element. CSS classes should be written accordingly.
<body class="dark-mode">...</body>.dark-mode .block {
background: #000000;
}Manual with Tailwind
If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
// ...
}Conclusion
I strongly encourage you to incorporate dark mode into your apps. Show your readers respect and seriously consider its inclusion as a gesture of good communication with your audience.
