Device color modes

Dark mode

Dark mode is a device-specific color mode. It affects the colors of interfaces at an operating system level and displays dark grays for most applications.

Gradient of color from yellow to orange to dark purple

How it affects UI design

In web applications, dark mode can be given unique styling using the prefers-color-scheme media query.

Dark mode can cause adverse effects for certain users (such as eye strain or migraines) when contrast is too high or if they have light sensitivity.

Colors on a dark background may appear differently than when they are placed on a light background.

The darkness or contrast of colors on a dark background may appear differently than when they are placed on a light background.

Sources:

  1. Using a light or dark appearance on your mac. Apple Support. https://support.apple.com/guide/mac-help/use-a-light-or-dark-appearance-mchl52e1c2d2/mac
  2. prefers-color-scheme. Mozilla. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme