Page MenuHomePhabricator

Add night mode to Minerva
Open, LowPublic

Description

Via @Quiddity on IRC (via someone else)
I could have sworn a task was open but can't find one.

Good news is we can have a night mode with a few lines of CSS

Developer notes

Night mode could be enabled via an inline script at the top of the page when a cookie/localStorage item is set.

body, img, video, svg {
	filter: invert( 1 ), hue-rotate( 180deg );
}

body {
	background: #000;
}

I thought I was smart and the first to think of this, but of course turns out someone beat me to it > https://lnikki.la/articles/night-mode-css-filter/

Details

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterPOC, WIP: Minerva Night mode beta feature

Event Timeline

Jdlrobson created this task.Oct 3 2018, 3:18 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 3 2018, 3:18 AM
Volker_E updated the task description. (Show Details)Oct 4 2018, 5:47 PM

Change 466992 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] POC, WIP: Minerva Night mode beta feature

https://gerrit.wikimedia.org/r/466992

Change 466992 abandoned by Jdlrobson:
POC, WIP: Minerva Night mode beta feature

https://gerrit.wikimedia.org/r/466992

alexhollender triaged this task as Low priority.Nov 13 2018, 9:40 PM
Esanders updated the task description. (Show Details)Nov 29 2018, 1:16 PM
Esanders updated the task description. (Show Details)
Esanders updated the task description. (Show Details)Nov 29 2018, 1:19 PM
Esanders updated the task description. (Show Details)Dec 4 2018, 2:49 PM

Hack to fix logo on desktop site:

$('#p-logo').clone().addClass('mw-no-invert').insertAfter('#p-logo').css({position:'absolute',top:'0',height:'113px',overflow:'hidden'})

and add .mw-no-invert class to selector:

body, img, video, svg, .mw-no-invert {
	filter: invert( 1 ), hue-rotate( 180 deg );
}

Editing:

This comment was removed by jmatazzoni.
Volker_E updated the task description. (Show Details)Sep 19 2019, 12:36 AM
Volker_E removed a subscriber: jmatazzoni.
Volker_E updated the task description. (Show Details)Sep 19 2019, 2:37 AM

@Jdlrobson That night mode color looks extremely bad in my opinion. Maybe use grey or similar dark colors to style the night mode? Just one or two colors doesn't make it look good.

@Jdlrobson That night mode color looks extremely bad in my opinion. Maybe use grey or similar dark colors to style the night mode? Just one or two colors doesn't make it look good.

That's why I said "could". Personally i think night mode should be done at the browser level and I don't think this should be implemented. It's a lot of code that I don't have faith that we can easily maintain given the low amount of staff and volunteers we have.

Pelagic added a subscriber: Pelagic.EditedSep 26 2019, 2:12 AM

Ideally there would be two dark themes: very black (for OLED) and not-so-black (for LCD). That's been done for the Wikipedia mobile apps. (And as far back as 2012, T44332 mentioned OLED as a motivator for dark themes.) Maybe "has more colour themes" is a selling point for the app, though.

See also the dark blue vector theme.

Have to admit that invert + hue rotate (rather than creating a whole theme) is a neat hack, though!