How should I support dark mode?

Asked on 2024-07-30

1 search

To support dark mode in your app, you can follow these guidelines based on the content presented at WWDC:

  1. Smooth Transitions: Ensure smooth transitions between dark and light resources. For example, in visionOS, the transition between dark and light modes is one and a half seconds long. Keeping transitions brief helps maintain immersion (Enhance the immersion of media viewing in custom environments).

  2. Adjust for Always-On Display: For Apple Watch, when the watch is in always-on mode, the system will automatically switch to a dark appearance with reduced luminance. Use the isLuminanceReduced environment value to adjust bright elements accordingly (Bring your Live Activity to Apple Watch).

  3. Adaptive Colors: Use semantic colors like primary which will automatically adapt to the current color scheme. This ensures that your app looks great in both light and dark modes (Bring your Live Activity to Apple Watch).

  4. Transparent Backgrounds: Ensure your images have transparent backgrounds so they look good in both light and dark modes. This is particularly important for accessory setup (Meet AccessorySetupKit).

  5. Consistent Visual Experience: App icons and widgets can now appear light, dark, or with a tint. A tinted version of your app icon will automatically be available to users, ensuring a consistent visual experience across the home screen (Platforms State of the Union).

  6. No Light/Dark Mode in visionOS: Note that visionOS does not have a concept of light and dark mode. Instead, it uses materials like glass that adapt to the lighting in the environment (Design great visionOS apps).

Relevant Sessions

By following these guidelines, you can ensure that your app provides a seamless and visually appealing experience in both light and dark modes.