Device color modes

Light mode

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

Gradient of color from yellow to orange to dark purple

How it affects UI design

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

Light 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 light background may appear differently than when they are placed on a dark background.

The lightness or contrast of colors on a light background may appear differently than when they are placed on a dark 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