Please create design studies or (better) mockups that can show a few variations of how Wikipedia might look in dark mode.
- A dark mode page that is accessible, easy to read in low light, and builds off the existing Wikimedia user-interface color palette so as to be on-brand.
- The iOS team did a lot of research towards this end. Insofar as possible, we should not reinvent the wheel but should leverage their work and aim for a Night Mode that aligns with what was done for the iOS app.
- CommTech projects must be completed expeditiously, so please keep this in mind and reduce complexity whenever possible. It's not essential that we handle every possible variation or exception, but rather that we get to a workable solution in good time.
Our first step will be to pursue the following:
- Wikipedia only
- Desktop only
- Dark mode only (don't design for other reading modes, like Sepia, high-contrast, etc.)
- Don't invert images, logo, maps, graphs.
- Works for logged-in and logged-out users
Wishlist wish that inspired this project
- Here's the wish, FYI Night mode
Our current plan is achieve a dark mode baseline using CSS filter (specifically invert and hue-rotate). We will then introduce a number of enhancements targeted at popular elements, with full awareness that these enhancements will not work in an entirely consistent manner (both within a given Wikipedia site, and among Wikipedia sites). Elements we've identified thus far that need enhancements are:
- infobox (background & border color)
- table of contents (background & border color)
- links (normal, visited, red)
- image overlay (background & icons)
- ambox (background & border color)
- headings (border color)
- search field (border color)
- image thumbnails (background & border color)
- side nav (border color)
- header (border color)
- content container (border color)
- Mapframe (embedded) maps
You can view the current CSS here: https://en.wikipedia.org/wiki/User:AHollender_(WMF)/vector.css
2020: An updated and further evolved implementation as user script can be found here: https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode