Dark mode design
Running notes and design documentation for dark mode.
Background
Wired: "How dark mode took over our screens"
Elementary OS survey research results:
Reason for using dark mode | Percentage |
---|---|
Aesthetics | 70% |
Health | 50% |
Accessibility | 46% |
Environmental | 35% |
Power saving | 29% |
Familiarity | 10% |
"81% use dark modes for at least one of health, accessibility, or environmental reasons".
Goals & use cases
Behavioural goals:
- 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
Other considerations:
- If there's a system setting, it should always have a clear and noticeable effect
Relevant art
Windows
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?
Mac
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.
iOS
Android
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?
Ubuntu
Pop!_OS
Firefox
Riot Web
Tentative design
App behaviour
Core apps
Always dark:
- Image Viewer
- Photos
- Screenshot?
- Videos
Default to dark, with an preference to switch to light:
- Terminal
Default to light, with an preference to switch to dark:
- Document Viewer
- Text Editor
All other apps follow the system preference.
Optional apps
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