The dark mode is becoming a built-in option in every big operating system. Windows 10 and macOS have already adopted dark mode, and it’s coming to iOS 13 and Android. Chrome and Firefox have their own dark modes.
Despite the hype, dark mode won’t necessarily help reduce eye strain. The dark mode isn’t a one-size-fits-all improvement for everyone. That’s why it’s an option that’s not enabled by default.
Do Dark Backgrounds Help Your Eyes?
Dark backgrounds are sometimes better for your eyes, but not all the time. For example, a white background with black text is more readable. This comes down to the properties of color, light, and the human iris. White color reflects every wavelength in the color spectrum, which means our irises don’t need to open wide to absorb enough light. High-contrast colors like black and white allow us to see things more sharply because black actually absorbs wavelengths instead of reflecting them.
White text on a black background doesn’t work as well, since our iris needs to open up more to get light, deforming the lens and making it look blurry. This is especially true for people with astigmatism.
Another reason for switching your screen to a dark mode is the reduced eye strain. Starting at a white screen for a long time isn’t an ideal situation. Scientific studies have not proved yet that the dark mode is better, but one thing is certain, it just looks nicer.
Pros and Cons of a Dark Background Design
While dark mode may be ideal for most people, other people may have vision conditions that make it easier to read bright text on a dark background. Let’s look at some known facts about dark backgrounds.
Pros
- An integrated development environment (IDE) can be easier on the eye with dark themes.
- Dark themes can reduce eye strain in low-light environments.
- High contrast between black text and white background reduces eye strain.
- Apps with dark mode can increase the battery life of a mobile phone.
- Dark backgrounds can move attention away from the design itself and toward the visuals it presents.
- They are more accessible for astigmatic people
Cons
- Dark backgrounds can put more strain on your eyes in high-light conditions.
- White text on a black background is usually harder to read and causes more eye strain.
- Reading text on a white-on-black theme will typically be harder.
In conclusion, dark backgrounds are most useful when you’re in low ambient light or don’t need to read a lot of text. If you do a lot of reading, you should choose a dark-on-light theme and try to control your screen brightness and your ambient light instead of changing the background colors.
Implement Light or Dark Modes in CSS
The CSS working group created a prefers-color-scheme media query. Media queries are useful when you want to modify your site or app depending on the device’s general type or specific characteristics and parameters such as screen resolution or background color.
The syntax looks something like this:
@media (prefers-color-scheme: light | dark)
{ … }
The prefers-color-scheme media query has two effective values: light and dark. Potentially you can use three different designs: default (no-preference), light theme, and dark theme.
@media (prefers-color-scheme: light) {
html {
background: white;
color: #555;
}
}
@media (prefers-color-scheme: dark) {
html {
Background: black;
color: #ddd;
}
}
Tips for a Black Background Website Design
Black websites have become popular lately, and you should try such a design theme for your own website and see the results.
Typography
Black websites have to contain readable fonts. It’s essential to find fonts that work well with black colors. White, sharp fonts would be the best choice. Darker fonts won’t be visible and will require other types of highlighting to be seen.
Reflections
Reflections in web design are mostly used when the background is dark or black. They make the website look more appealing without adding other elements.
Images
Creating a background image that is dark will have the same visual effect as using a theme that is dark. You just have to find the one that suits your website the best.
Make sure that the dark background image blends naturally into the theme’s background. The theme you select should have darker features, so that the image doesn’t just pop-up there.
Color Scheme
The color scheme shouldn’t contain a lot of features, because black websites are usually minimal and a lot of colors will just make the website crowded and difficult to read.
Conclusion
A dark mode in CSS doesn’t only add a nice design to your website but also improves user experience and accessibility. A dark-to-light mode switch can be especially useful on sites that publish long-form content pieces or require users to focus on the screen for a longer period of time.
Make sure to incorporate elements that are visible against the dark background. Depending on what the website is presenting, a black background can add a very elegant touch to it.
Author Bio
Gilad David Maayan is a technology writer who has worked with over 150 technology companies including SAP, Samsung NEXT, NetApp and Imperva, producing technical and thought leadership content that elucidates technical solutions for developers and IT leadership.