How to Implement Dark Mode: 5 Essential Tips to Remember by@abhirajb

How to Implement Dark Mode: 5 Essential Tips to Remember

tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

Dark theme is one of the most requested features over the past few years. The biggest tech companies in the world have made dark themes an essential part of UI.

Company Mentioned

Mention Thumbnail
featured image - How to Implement Dark Mode: 5 Essential Tips to Remember
Abhiraj HackerNoon profile picture

@abhirajb

Abhiraj

I make stuff on the web and write blogs about...

About @abhirajb
LEARN MORE ABOUT @ABHIRAJB'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

Dark theme is one of the most requested features over the past few years.

The biggest tech companies in the world have made dark themes an essential part of UI. Dark themes reduced luminance and provide safety in dark environments and can minimize eye strain.

Here are 5 tips you should keep in mind when implementing dark mode in your apps:

1️⃣ Avoid pure dark

Use a dark gray (#121212) as a dark theme base color to express elevation and space in an environment with a wider range of depth and also reduce eye strain.

dark1

dark1

2️⃣ Avoid using saturated colors on dark themes

Saturated colors don't pass WCAG's accessibility standard, instead, use desaturated colors that can be used as a more legible alternative

dark2

dark2

3️⃣ Accessibility and Contrast

Dark theme surfaces must be dark enough to display white text, to ensure that body text passes WCAG's AA standard.

image

4️⃣ Communicate Depth

The higher a surface's elevation is, the lighter that surface becomes.

dark4

dark4

Pic Credits: CSS Tricks

5️⃣ Light text on dark backgrounds

When light text appears on dark backgrounds, it should use the following opacity levels:

dark5

dark5

Thank you for reading

If you liked this post, subscribe to my newsletter to never miss out on my blogs, product launches, and tech news, and follow me on Twitter for daily threads on web dev resources.

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa