Dark mode design
Running notes and design documentation for dark mode.
|Reason for using dark mode||Percentage|
"81% use dark modes for at least one of health, accessibility, or environmental reasons".
Goals & use cases
- Provide a system-wide dark mode, in line with expectations from other platforms
- Allow some apps to retain their own light/dark preference, which is independent of the system setting. Use cases for this:
- Apps which people spend a lot of time in (code editors, graphic design apps
- Development apps which need to be able to change the theme - Icon Library, Widget Factory, etc
- Allow some apps to always be dark
- This primarily relates to media apps: Image Viewer, Photos, Videos, etc
- If there's a system setting, it should always have a clear and noticeable effect
Dark mode can be applied to the system or apps separately.
Apps can have their own setting, which includes a "system default" option:
Question: does Windows have any apps that are dark by default? What's their behaviour?
Auto changes to dark mode according to the time of the day. It looks like, for some apps, there's a setting to opt out of dark mode when it's on.
Question: what's the behaviour of dark by default apps on Mac? Examples would be helpful.
Dark mode can be enabled from the quick settings or the display settings:
Dark mode is also automatically activated when battery saver is on.
Android apps are all light by default.
Question: do any apps have their own dark mode preferences? How do these work in relation to the system dark mode setting?
- Image Viewer
Default to dark, with an preference to switch to light:
Default to light, with an preference to switch to dark:
- Document Viewer
- Text Editor
All other apps follow the system preference.
Examples of apps that could always be dark:
- Photo managers
Examples of apps that could have an in-app preference:
- IDEs, text editors
- Reader apps
- Image editors