- 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.

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.

macOS: Dark Mode Typography

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.

University of Michigan - Ann Arbor

Four primary themes differentiate macOS apps
- Flexible: People expect macOS apps to be intuitive, while simultaneously adaptable to their workflow through customization and flexibility
- Expansive: Large, high-resolution displays are typical for most Mac users, and people often extend their workspace by connecting additional displays.
- Capable: Macs are extremely capable in terms of hardware and software. Apps can harness this power to offer an extensive range of features and workflows
- Focused: macOS is designed to keep the current task clear and in focus. Visual contrast, translucency, and a large drop shadow make it easy to differentiate the active window from inactive windows.

macOS Design

Apple Human Interface Guidelines

macOS apps use translucency and blurring to evoke a sense of depth, by enabling views and controls to hint at content residing in the background. They also use vibrancy, a subtle effect that dynamically blends the foreground and background colors using a careful balance of lightening and darkening techniques. This combination helps make foreground content stand out against any background.

Learn Before

Related

Learn After