Dark Mode

What is dark mode?

You pick up your phone in bed before sleep, the lights in the room are off, and the white screen shines in your face like a lamp. That moment is exactly why dark mode exists.

Dark mode is a way to show the screens of a website or app with a dark background and light text and icons, instead of the usual black text on white. The content stays as it is: the same buttons, the same menus, the same words. Only the colors change, so the screen is calm on the eyes when the light around you is dim.

People also call it night mode or dark theme. Today it is built into phone and computer systems and into most of the apps we use every day, so people expect it from any new website or app.

How does dark mode work?

Phones and computers have a general setting where the user picks a light or dark appearance, and some devices switch between the two on their own at sunset. A well-made website or app reads this setting and opens in the right colors from the first second.

There is a second way too. A small button inside the site or app, often shaped like a sun and a moon, lets the user switch between the two modes by hand. After that the system remembers the choice, so it does not jump back to light mode on every visit.

Behind the scenes, the designer prepares two sets of colors for everything on the screen: the background, the text, the buttons, the borders and the tables. The system then picks the right set for the mode. Think of a room with two kinds of lighting, one for the day and one for the evening, while the furniture stays where it is.

Why does dark mode matter to you?

If you own a website or an app, your visitors open it at different times of the day. Many of them browse at night. Dark mode changes their experience in those hours in a clear way:

• Comfort for the eyes in low light: a dark screen does not dazzle in a dark room, so the reader can finish the article or keep browsing products for longer without discomfort.
• Phone battery saving: on phones with OLED screens, every black pixel is nearly off and uses no power. So dark mode uses less battery on these screens.
• Less tiredness for people who work long hours: an employee who spends the day in front of a dashboard or a management system feels the difference by the end of the day, especially on night shifts.
• Respect for the user's choice: someone who picked the dark appearance on their phone and then opens your site to find it bright white will feel the site is not paying attention to them.

Does this mean dark mode is always better? No. In sunlight or in a well-lit office, many people read black text on white more easily. The goal is to leave the choice in the user's hands.

Light mode and dark mode compared

How to design a dark mode that is easy on the eyes

Simply flipping the colors usually gives a poor result. A dark mode people feel comfortable with needs many small decisions:

1. Dark gray instead of pure black: pure black next to bright white makes a harsh contrast that tires the eyes. A dark gray or navy background is softer.
2. Light text that is not pure white: white with a slight touch of gray is easier to read than pure white.
3. Enough contrast: contrast is the difference between the text color and the background color. If it is too small, reading gets hard, especially for older people and people with weak sight. The WCAG accessibility standard sets a minimum for this difference.
4. Softer brand colors: a strong blue or red looks loud on a dark background, so it needs a slightly calmer shade.
5. A logo and images that fit both backgrounds: a black logo disappears on a dark background, so it needs a light version. Very bright photos may need to be toned down a little.
6. Tables and charts: in dashboards, the colors of bars and lines must be checked so they stay clear in both modes.

Common mistakes when adding dark mode

• Turning on dark mode for the home page and forgetting other pages, such as the checkout page or the login window, which then flash white.
• Faint gray text on a dark background that hardly anyone can read.
• Not saving the user's choice, so the site goes back to light mode every time.
• Ignoring the device setting and forcing one mode on everyone.
• Not testing dark mode on real phones before launch, even though colors look different from one screen to another.
• Adding it at the end of the project, after the design is finished, so it ends up as a patch and not part of the interface.

Dark mode in the websites and apps we build

At Linkysoft we plan dark mode from the first day of design, not after the design is done. Every site we build through our website design and development service comes with built-in dark mode, Arabic and right-to-left (RTL) support and the WCAG 2.2 accessibility standard, and we test it on real phones before launch.

In mobile app development we design each app from scratch with light and dark modes and accessible screens, for iPhone and Android, then publish it on the App Store and Google Play and keep it updated.

Is your project a management system your team uses all day, such as a sales, stock or HR system? Then we build it through our web applications and management systems service around the way your company works, and it runs on every device. Here eye comfort deserves a place in the plan, because the same screen stays open in front of an employee for eight hours or more.

Thinking about a new website or app? Start with a free consultation with us, and together we will work out what your users need by day and by night.