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.