Maniphest T206094

Add night mode to Minerva
Closed, DuplicatePublic
Actions

Assigned To

None

Authored By

	Jdlrobson
	Oct 3 2018, 3:18 AM

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

	Subject	Repo	Branch	Lines +/-
	POC, WIP: Minerva Night mode beta feature	mediawiki/skins/MinervaNeue	master	+21 -1

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
Resolved		ovasileva	T341632 [EPIC] Palette customizations and dark mode
Resolved	Feature	ovasileva	T26070 [GOAL] Provide a dark / night mode skin or theme
Duplicate		None	T206094 Add night mode to Minerva

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 subscribed.Oct 4 2018, 5:37 PM

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

gerritbot added a project: Patch-For-Review.Oct 12 2018, 9:50 PM

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

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

Liuxinyu970226 subscribed.Nov 11 2018, 12:50 PM

Liuxinyu970226 awarded a token.Nov 11 2018, 12:52 PM

• alexhollender_WMF 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:

Jdlrobson added a parent task: T26070: [GOAL] Provide a dark / night mode skin or theme.Mar 5 2019, 8:36 PM

Aklapper mentioned this in T220571: Create a tag for new Community Tech project 'Night Mode.Apr 10 2019, 5:22 PM

• jmatazzoni added subscribers: • aezell, Mooeypoo.Apr 16 2019, 7:13 PM

• jmatazzoni subscribed.Apr 16 2019, 7:23 PM

This comment was removed by • jmatazzoni.

• aezell mentioned this in T221403: Add night mode inversion code with a feature flag, so we can test it out.Apr 18 2019, 8:54 PM

• alexhollender_WMF mentioned this in T221425: Design for dark mode styles/color scheme.Apr 23 2019, 12:59 AM

Volker_E updated the task description. (Show Details)Sep 19 2019, 12:36 AM

Volker_E removed a subscriber: • jmatazzoni.

Maintenance_bot removed a project: Patch-For-Review.Sep 19 2019, 1:10 AM

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.

In T206094#5524515, @Masumrezarock100 wrote:

@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.

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.

	F26284848: Screen Shot 2018-10-02 at 8.16.11 PM.png
	Oct 3 2018, 3:18 AM

	F28319822: image.png
	Mar 3 2019, 4:14 PM

	F28319831: image.png
	Mar 3 2019, 4:14 PM

	F27324951: image.png
	Nov 29 2018, 1:16 PM

Add night mode to MinervaClosed, DuplicatePublicActions