Page MenuHomePhabricator
Create Task
Maniphest T241925

Dark mode does not persist between pages
Closed, ResolvedPublic
Actions

Description

If I enable Dark Mode, I want it to stay this way until it is disabled rather than reset on page load.

Downstream report: https://phabricator.miraheze.org/T5065

Fixing this requires two steps:

Details

SubjectRepoBranchLines +/-
Make DarkMode usable by anons and add user prefmediawiki/extensions/DarkModeREL1_36+62 -29
Make DarkMode usable by anons and add user prefmediawiki/extensions/DarkModeREL1_35+62 -29
Make DarkMode usable by anons and add user prefmediawiki/extensions/DarkModemaster+62 -29
OutputPage: allow additional CSS classes to be added to <html>mediawiki/coremaster+21 -2
Customize query in gerrit

Related Objects

Event Timeline

RhinosF1 created this task.Jan 5 2020, 9:56 AM
Restricted Application added a project: Community-Tech. · View Herald TranscriptJan 5 2020, 9:56 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
RhinosF1 moved this task from Radar to Miraheze-Linked on the User-RhinosF1 board.Jan 5 2020, 9:57 AM
Omegatron subscribed.Jan 5 2020, 2:38 PM
Reception123 subscribed.Apr 6 2020, 6:39 PM
Volker_E subscribed.Apr 25 2020, 3:09 AM
gerritbot added a comment.Apr 27 2020, 9:14 PM

Change 592766 had a related patch set uploaded (by MusikAnimal; owner: MusikAnimal):
[mediawiki/core@master] OutputPage: allow additional CSS classes to be added to <html>

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

gerritbot added a project: Patch-For-Review.Apr 27 2020, 9:14 PM
MusikAnimal added a comment.EditedApr 27 2020, 9:43 PM

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/592766 is just part of it. That permits us to put the client-dark-mode CSS class on the <html> element on page load (rather than adding it with JS, which will cause a flashing effect).

The other part is actually storing and reading the hidden user preference, and calling OutputPage::addHtmlClasses( 'client-dark-mode' ) accordingly.

Another issue that I don't think has been raised yet is that on the WMF cluster the Varnish cache will prevent this code from running for logged-out users (since the whole document is cached). So I think either the dark mode feature will have to be disabled for logged out users (perhaps offer a wg config variable, since non-Varnish installations won't be effected), or logged out users just don't get to have a sticky dark mode.

• Demian subscribed.EditedApr 27 2020, 10:52 PM
In T241925#6087111, @MusikAnimal wrote:

on the WMF cluster the Varnish cache will prevent this code from running for logged-out users (since the whole document is cached). So I think either the dark mode feature will have to be disabled for logged out users (perhaps offer a wg config variable, since non-Varnish installations won't be effected), or logged out users just don't get to have a sticky dark mode.

Afaik logged-out users don't have server-side settings, thus this setting can be stored only client-side. A synchronous (no flash/FOUC) solution for a similar feature in ca. 300 bytes (uncompressed): sidebar open state. The update logic is loaded asynchronously.

MusikAnimal added a comment.Apr 27 2020, 11:00 PM

Afaik logged-out users don't have server-side settings, thus this setting can be stored only client-side. A synchronous (no flash/FOUC) solution for a similar feature in ca. 300 bytes (uncompressed): sidebar open state. The update logic is loaded asynchronously.

Good point! I haven't gotten that far but I was assuming it'd be cookie-based, which should work for logged-out users. Otherwise, I guess dark mode is a no go for them. Once you add JS into the picture you risk the "flashing" issue I was talking about, which can be quite annoying, especially on slower clients.

• Demian added a comment.Apr 28 2020, 12:11 AM
In T241925#6087274, @MusikAnimal wrote:

Afaik logged-out users don't have server-side settings, thus this setting can be stored only client-side. A synchronous (no flash/FOUC) solution for a similar feature in ca. 300 bytes (uncompressed): sidebar open state. The update logic is loaded asynchronously.

I was assuming it'd be cookie-based, which should work for logged-out users.

When I introduced useskin= as a cookie (T243920) the concern was that either the cache has to contain copies for each value (cache split / vary -> a waste of space) or the cache has to be skipped (pass -> increased backend load). It's also difficult to get a cookie through legal. LocalStorage has no such issues.

Once you add JS into the picture you risk the "flashing" issue I was talking about, which can be quite annoying, especially on slower clients.

Above-the-fold inline scripts are render-blocking. If you put the script element before the content then it will execute before first draw.

gerritbot added a comment.Apr 28 2020, 8:09 PM

Change 592766 merged by jenkins-bot:
[mediawiki/core@master] OutputPage: allow additional CSS classes to be added to <html>

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

Maintenance_bot removed a project: Patch-For-Review.Apr 28 2020, 8:11 PM
ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.31; 2020-05-05).Apr 28 2020, 9:00 PM
MusikAnimal updated the task description. (Show Details)May 8 2020, 8:26 PM
MusikAnimal updated the task description. (Show Details)
taavi subscribed.Aug 9 2020, 9:33 AM
Aklapper merged a task: T270024: Keep dark mode on moving to other pages.Dec 15 2020, 11:16 AM
Aklapper added subscribers: Atmark-chan, Aram.
R4356th subscribed.Apr 16 2021, 10:20 PM
gerritbot added a comment.Apr 23 2021, 2:07 PM

Change 682134 had a related patch set uploaded (by R4356thwiki; author: R4356thwiki):

[mediawiki/extensions/DarkMode@master] Make DarkMode usable by annons and add user pref

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

gerritbot added a project: Patch-For-Review.Apr 23 2021, 2:07 PM
R4356th claimed this task.Apr 23 2021, 2:25 PM
gerritbot added a comment.Apr 26 2021, 9:58 PM

Change 682134 merged by jenkins-bot:

[mediawiki/extensions/DarkMode@master] Make DarkMode usable by anons and add user pref

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

MusikAnimal closed this task as Resolved.Apr 26 2021, 10:02 PM

Dark mode persistence now works for logged in users. If we want to do this for logged-out users (which will probably still cause a 'flashing' effect), let's open a new task.

Maintenance_bot removed a project: Patch-For-Review.Apr 26 2021, 10:10 PM
Maintenance_bot moved this task from Miraheze-Linked to Done on the User-RhinosF1 board.Apr 26 2021, 10:15 PM
dmehus subscribed.Apr 26 2021, 10:18 PM
R4356th mentioned this in rEDKM0224fa679de8: Make DarkMode usable by anons and add user pref.Apr 26 2021, 10:34 PM
gerritbot added a comment.Apr 27 2021, 5:31 PM

Change 682822 had a related patch set uploaded (by R4356thwiki; author: R4356thwiki):

[mediawiki/extensions/DarkMode@REL1_35] Make DarkMode usable by anons and add user pref

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

gerritbot added a project: Patch-For-Review.Apr 27 2021, 5:31 PM

Change 682823 had a related patch set uploaded (by R4356thwiki; author: R4356thwiki):

[mediawiki/extensions/DarkMode@REL1_36] Make DarkMode usable by anons and add user pref

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

gerritbot added a comment.Apr 27 2021, 6:21 PM

Change 682822 merged by jenkins-bot:

[mediawiki/extensions/DarkMode@REL1_35] Make DarkMode usable by anons and add user pref

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

gerritbot added a comment.Apr 27 2021, 6:21 PM

Change 682823 merged by jenkins-bot:

[mediawiki/extensions/DarkMode@REL1_36] Make DarkMode usable by anons and add user pref

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

Restricted Repository Identity mentioned this in rEDKMe56ef5ac1377: Make DarkMode usable by anons and add user pref.Apr 27 2021, 6:22 PM
Restricted Repository Identity mentioned this in rEDKMa4b2ada28e9c: Make DarkMode usable by anons and add user pref.
Maintenance_bot removed a project: Patch-For-Review.Apr 27 2021, 7:10 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL