Dark Mode (light or bright text/ design on dark background) is a trending design option as it is said to conserve screen energy and reduce eye strain, when computers and devices are used over time. At night, the glare from white screens in addition to screen flicker and contrast causes eye fatigue for users, affecting productivity, especially at night. However, research is inconclusive as to whether dark is actually better than light mode for users… it is largely a matter of personal preference.
To really save battery life, however, your phone should have an OLED screen, not an LCD screen. This is because the pixels don’t light up on dark surfaces on OLED screens. The actual power savings depend on brightness settings. Read more on IFixit.
Today the Dark Mode option is increasingly popular and is available on mobile devices and iPhones, on select Google apps including Google Play, on Google Docs, Sheets and Slides on Android, on Apple screens, now on Whatsapp and Facebook too. Websites are offering the dark mode option as well.
A dark mode toggle button or theme color switcher on a template or on a device turns the theme from light to dark mode. Many devices enable you to enable dark themes in their settings and even for the device to automatically switch from day to night mode settings to save power and also cut screen glare from your eyes.
Facebook added a dark mode toggle to its new-look website in 2020 to reduce screen glare, add vibrancy and a more immersive experience to its users. Dark mode was earlier an opt-in version only for some users in some markets, and is now available to all users globally.
PCMag says many apps can have dark mode enabled.
Dark mode has been gaining in popularity and some users have a distinct preference for either light or dark mode, while some opt to switch from light to the dark at night.
In designing for dark mode, it’s wise to follow the guidelines set forth by the major players. Both Apple and Google have a set of dark theme principles. You will find Apple’s Human Interface Guidelines here, and Google’s Material Design documentation here.
Google’s Material Design dark theme guidance gives provides valuable information for dark mode design.
Material recommends the following guidelines for dark theme design:
Use dark grey rather than black. Recommended surface color: #121212.
Use fewer contrasting colors in design.
Use elevation, overlays, shadows and depth to create attractive dark mode design.
Typically the accent color is light or bright and the predominant color is dark grey.
There may be secondary colors in the tonal palette. Lighter colors (colors in the 200- 50 range have better readability on dark surfaces at all elevations.
Saturated colors visually vibrate against dark surfaces.
White text and opacity
“On” colors are colors used for text and elements in a dark theme. By default, dark theme “on” colors are white and black. To distinguish between different hierarchies of white text, reduce the opacity. High emphasis #FFFFF 87% opacity, medium emphasis #FFFFF 60 % opacity, Disabled #FFFFF 38% .
Desaturated primary colors for readability
Primary colors are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels.
This prevents eye strain and increases readability.
Contrast levels
Dark theme surfaces must be dark enough to display white text. They should use a contrast level of at least 15.8:1 between text and the background.
Examples of Google products using dark mode design
Material Design found expression in Google’s own products designed in dark mode: Google Photos, showcasing images with low contrast grays, Google Calendar, using color for emotion and legibility, Google News, reducing high-contrast blur for better readabililty, and Android Auto, simplifying UIs to enhance glanceability. Read more.
Here are some examples of dark mode design in website themes, PowerPoint templates, poster and flyer design and social media templates.
Club Couture – Night Club HTML Website Template
This dark theme Website Template for a night club venue showcases colorful images in sliders, videos, transitions, animations of musical notes, and thin red lines, icons and text that contrast with the dark background. Page transitions are interesting when you click Previous and Next buttons that turn red and the Welcome text in white pops out from the dark background, outlined in red.
Moviestar – Online Movie, Video & TV Show WordPress Theme
Created for online video, this fully responsive WordPress movie theme allows the sharing of online movies and TV shows. The dark theme highlights the bright banners and buttons, and sliders and grids introduce your content, giving your viewers a truly immersive experience. Flexible theme options easily adapt to different design and development needs. Create this amazing website without touching a line of code!
Demo
Natania | Personal Portfolio HTML5 Website Template
This attention-getting dark mode template for the personal portfolio of a creative designer has a dark blue background that sets off brightly colored geometric and animations, while abstract backgrounds, infographics and sliders add interest to content which includes project experience and testimonials. Red is used to highlight icons, menu text and graphs on click.
TMSTREETIE – STREETWEAR FASHION PrestaShop Theme
This hip and happening streetwear template has 3 homepage designs, design panel, panel tool with theme editor for customization to dark mode. It’s the real deal to promote T-shirts, jeans, beauty products, streetwear fashion, or your fashion and beauty store.
HUS – Architecture Studio Works WordPress Theme
This elegant architecture theme for WordPress built with Bootstrap 4, turns still more glamorous at the switch of a button with Dark Mode presentation. View it in trendy dark mode with the Theme Color Switcher, a toggler on the top right of the Demo , which turns black on white for dark mode and blue on light blue for light mode at the flick of a switch. Ideal for professional architects, architecture/design studios looking for a way to present their portfolio, services, entrepreneurial capabilities in the most professional way.
Fattsushi | Japanese Sushi Restaurant HTML5 Website Template
Fattsushi Japanese Sushi Restaurant HTML5 template is a complete package for restaurants & Sushi Vendors. This fully responsive Bootstrap 4 template has 25+ pages including 6 awesome homepages, reservation page, team, history, chef, contact, login. You can also use it as a food blog, a website, online cookbook, cafe delivery service site, Japanese Sushi Restaurant ranking or recipe website. The demo shows illustrations and videos of chefs at work, and finished dishes attractively displayed, client testimonials, a blog and links to other restaurants of the group, with timings.
EXLIBRIS – Book Store WooCommerce Theme
This minimalistic, app-styled WooCommerce template has a Dark Mode switcher. Click the half moon button in the demo to view in Dark Mode. Bright colors and color gradients are highlighted beautifully in Dark Mode.
WestOre – Modern, Flexible and Multi-purpose WooCommerce Theme
Build any kind of store you want with the highly customizable WestOre multipurpose WooCommerce template – from electronics and entertainment to games, fashion and beauty, food and restaurant, or any other.
A fully responsive theme with elegant design, robust usability and exceptional user experience. Designed and organized with categories, sliders/ carousels, banners, displays, with focus on the frontpage with product grid, the template provides you with multiple theme options, global design options, and much more including footer design, sidebars and widgets. The Theme Color Switcher lets you play with light or dark colors for the theme.
Bitcoin ICO Cryptocurrency Landing Page (Blue, Dark and Light)
A futuristic look, graphic animations, rectangles highlighting statistics, isometric illustrations displaying bitcoin transactions, and abstract designs combine to make this landing page template very well designed for your financial needs specific to cryptocurrency. It has both dark and light design options, in dark and light blue. Make a complete project presentation highlighting all the benefits of your services. A video and sales team profile is included.
Live Demo: Blue, Dark and Light
