Skip to main content

Color mode

Color mode, often referred to as light mode and dark mode, is a design and user interface concept that allows users to choose between different color schemes for the appearance of applications, websites, operating systems, and other digital interfaces. These color modes are designed to enhance user experience based on their preferences and environmental conditions.

Benefits​

Eye comfort: Providing options for color modes can improve accessibility for individuals with visual impairments or sensitivity to bright lights. Dark mode can be less straining on the eyes, especially in low-light settings, potentially reducing eye fatigue.

note

While dark mode is generally more accessible in low-light environments, it might not always be the case for everyone. Some individuals with specific visual impairments or sensitivities might find light mode more comfortable. It is therefore important not to force the dark mode on your website, but rather give users an option to decide what they want. Also, make sure colors in any mode have sufficient contrast ratios.

Personalization: Users can choose the mode that suits their preferences and the lighting conditions they are in. Some users just prefer the aesthetic of one mode over the other, and having the option to switch can improve their overall satisfaction with the interface.

Battery Savings: Dark mode can save battery life on devices with OLED or AMOLED screens, as they use less power to display darker colors than lighter ones.

Real-world examples​

See how the following websites implemented the color mode switcher (accurate as of October 2023):

  • Material UI - sun and moon icons in the header
  • React - sun and moon icons in the header
  • Duckduckgo - 6 options to choose from the menu (burger menu icon) > Themes

Set a color mode in the system​

The ability to switch between dark mode and light mode is usually implemented in the settings or preferences section of the operating system, application, or website. The exact location can vary depending on the platform you are using.

See the instructions on where to set the color mode.
  • Windows: Open Settings > Personalization > Colors, then pick a pre-existing theme in Choose your mode option.
  • macOS: Head to System Preferences > General and select the theme.
  • iOS: Go to Settings > Display & Brightness, then tap the theme.
  • Android: This will depend on your phone's manufacturer, but you can usually find it in the device's Display settings and choose the theme.

You should be able to find the settings at similar places as listed above when you use a different device, system, application, or version.

Set color mode on the website​

If a website offers switching between light and dark mode options, you might usually find the toggle in the header or navigation bar, or sometimes in the user profile settings.

Implementation​

The following example demonstrates how you can implement the color mode switcher and functionality. Users can benefit from their color mode system settings only when the website has implemented the support for it.

See the implementation details.

There is a color mode button users can activate and reveal the list of options:

  • Light mode
  • Dark mode
  • Use system setting

Setting either light or dark mode will switch the page to the respective theme mode. Setting the "Use system setting" will set the same theme users have chosen in their operating system theme settings.

The theme value is read from/set to the localstorage. Also, the media query prefers-color-mode checks for user system preferences.

Toggling between the light and dark modes switches the value in the data-color-mode attribute, which would usually be put on html or body elements.

This creates a CSS selector where we can use CSS variables that switch color values for each mode, allowing multiple themes to have their own color settings. For instance:

[data-color-mode="light"] {
  --color-text: #2e2d2c;
  --color-bg: #fff;
}

[data-color-mode="dark"] {
  --color-text: #f6f6f6;
  --color-bg: #2e2d2c;
}

Upon initialization, the code prioritizes the color mode stored in local storage. If absent, it uses the matchMedia method to detect the system's color scheme preference (light or dark). If neither is present, it defaults to light mode. The chosen mode is then stored persistently in local storage for future visits.

This is a basic implementation of color mode switcher.

Color mode implementation example
Edit on Codesandbox