Please create design studies or (better) mockups that can show a few variations of how Wikipedia might look in dark mode.
===Design Goals
- A dark mode page that is accessible, easy to read in low light, and builds off the existing [[ https://design.wikimedia.org/style-guide/visual-style_colors.html | 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.
===Project Requirements
- 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 [[ https://meta.wikimedia.org/wiki/Community_Wishlist_Survey_2019/Reading/Night_mode | Night mode ]]
====General approach
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)
You can view the current CSS here: https://en.wikipedia.org/wiki/User:AHollender_(WMF)/vector.css