- Focus on your content.
- Dark Mode is an aesthetic choice for users.
- Test your design in both light and dark appearances.
- Adopt vibrancy in your interfaces.

University of Michigan - Ann Arbor

In Dark Mode, the system adopts a darker color palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds.

macOS: Dark Mode

Apple Human Interface Guidelines

macOS: Dark Mode Guidelines

The color palette in Dark Mode includes darker background colors and lighter foreground colors. These colors aren’t necessarily an inversion of their light counterparts. 
- Embrace colors that adapt to the current appearance.
- Ensure sufficient color contrast in all appearances.
- Soften the color of white backgrounds.

macOS: Dark Mode Colors

Apps running in Dark Mode benefit from Desktop Tinting. When active, Desktop Tinting causes window backgrounds to pick up color from the user's desktop picture. The result is a subtle tinting effect that helps windows blend more harmoniously with their surrounding content. 
- Include some transparency in custom control colors.

macOS: Desktop Tinting

- Use template images wherever possible.
- Design individual glyphs for light and dark appearances when necessary
- Make sure full-color images look good.

macOS: Dark Mode Icons

The system uses vibrancy and increased contrast to maintain the legibility of text on darker backgrounds.
- Use the system-provided label colors for text.
- Use system views to draw static text.

Learn Before

Related