=== Result ===
A user can click to change the site to Dark Mode. They can click again to go back to Light Mode.
=== Implementation ===
Provide a simple link at the top of the page where things like "Preferences" are now for any user (logged in or logged out) to click. Clicking this will toggle the application of the CSS below to the page. The current mode should be saved in localStorage so the user's preference is maintained on that client across browser/client sessions. We believe this will work for Mobile Web as well as Desktop Web.
=== Code ===
@Jdlrobson and @Esanders created this CSS which we could use as a base:
```lang=css
$('#p-logo').clone().addClass('mw-no-invert').insertAfter('#p-logo').css({position:'absolute',top:'0',height:'113px',overflow:'hidden'})
body, img, video, svg, .mw-no-invert {
filter: invert( 1 ), hue-rotate( 180 deg );
}
```
=== Risks ===
We anticipate that there will be parts of some pages that fail with this simple of a change. So, we want to implement this with a feature flag and activate it for wikis such that we can test. It'll also let us quickly remove it if there is widespread upset.
===Temporary interface?
I don't care how the code gets turned on or off; do what is simplest. I imagine we could just have one url parameter for "night" and another for "day." Or, if we want to add a __temporary__ UI, just make it so anyone using the special url parameter sees a simple toggling link in the top nav, with the words Day/Night, as shown below:
{F28698394}
{F28698396}