Dark Mode

Dark mode has recently become an important foundational feature for modern software. Operating systems now support system wide dark mode which can be used to provide an alternate color scheme for software running on the system.

Apple Guidelines

From the iOS and macOS developer documentation:

Focus on your content. Dark Mode puts the focus on the content areas of your interface, allowing that content to stand out while the surrounding chrome recedes into the background.

Dark Mode is an aesthetic choice for users. Users can choose Dark Mode as their default interface style, and may use it at any time of day or in any lighting conditions.

Test your designs in both light and dark appearances. See how your interface looks in both appearances, and adjust your designs as needed to accommodate each one. Designs that work well in one appearance might not work in the other.

Adopt vibrancy in your interfaces. Vibrancy improves the contrast between foreground and background colors, making your foreground content appear more prominent.

Google Guidelines

From the Android developer documentation:

Dark theme is available in Android 10 and higher. It has many benefits:
Can reduce power usage by a significant amount.
Improves visibility for users with low vision and those who are sensitive to bright light.
Makes it easier for anyone to use a device in a low-light environment.

Your themes and styles should avoid hard-coded colors or icons intended for use under a light theme. You should use theme attributes (preferred) or night-qualified resources instead.
We recommend using Material Design Components, since its color theming system provides easy access to suitable colors.

React Example

Add dark mode to your React app with use-dark-mode and react-switch. Check out the example app and source or try the dark mode toggle below.

npm install use-dark-mode react-switch styled-components

The use-dark-mode package is a custom React Hook that exposes the value of your dark mode and a toggle method to switch between modes.

// DarkMode.jsx
import React from 'react'
import useDarkMode from 'use-dark-mode'
import Switch from 'react-switch'
import Button from './Button'

// with a Switch
export const DarkModeSwitch () => {
  const { toggle, value } = useDarkMode()
  return <Switch onChange={toggle} checked={value} />
}

// or with a Button
export const DarkModeButton () => {
  const { toggle, value } = useDarkMode()
  return <Button onClick={toggle}>{value ? '🌝' : '🌚'}</Button>
}

The dark mode value can be used to pass different themes into your styled-components ThemeProvider, or you can access the dark-mode and light-mode classes on the body tag with CSS.

// DarkModeComponent.jsx
import styled from 'styled-components'

export default styled.div`
  color: black;
  background-color: white;
  
  .dark-mode & {
    color: white;
    background-color: black;
  }
`

This example uses the SASS parent selector which is supported by styled-components to change color and background-color styles depending on the current mode.

Dark Mode