Page MenuHomePhabricator

Allow enabling dark mode while using a dark mode toggle gadget
Open, LowPublicFeature

Description

As an editor of articles, templates and scripts who uses a dark mode gadget, I want to make sure those articles, templates and scripts display as desired on the native dark mode, but currently it's extremely inconvenient to do so because the skin won't let me keep using the gadget and try the native dark mode at the same time.

Proposed solution: A mw.config option that disables the disabling of the native dark mode, like wgPostEditConfirmationDisabled and thanks-confirmation-required.

Event Timeline

Jdlrobson subscribed.

This will require changes to the gadget itself to provide an API to allow it to be easily disabled without disabling the gadget.

The following code could be added to the gadget or a user script to change the behaviour, however it would need to be adjusted to also allow dark mode styles to be removed:

const callback = () => {
    $('#skin-client-prefs-skin-theme .skin-theme-exclusion-notice').html('<a>Temporarily disable this gadget</a> to use this feature');
    $('#skin-client-prefs-skin-theme .skin-theme-exclusion-notice a').on('click', () => {
        $('#skin-client-prefs-skin-theme input').prop('disabled',false)
    });
};
if (   $('#skin-client-prefs-skin-theme .skin-theme-exclusion-notice').length ) {
    callback();
}
const observer = new MutationObserver(callback, { childList: true, subtree: true });
// Start observing the target node for configured mutations
observer.observe(document.getElementById('vector-appearance-pinned-container'));

As a general rule, Wikimedia code only checks for presence of gadgets, it doesn't alter gadget behaviour.

No, just give me an option that's basically "I don't care if they interfere, just enable these radio buttons" because (1) the toggle gadget alone doesn't interfere in any way whatsoever and (2) the dark mode gadget can be disabled without reloading.

Change #1051498 had a related patch set uploaded (by Nardog; author: Nardog):

[mediawiki/skins/Vector@master] Allow dark mode toggle gadget and night mode to coexist

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

Hi there! Apologies for blocking your patch, but I did a great deal of research into the existing gadget when writing the code that is currently present and there are a few considerations here that are not immediately obvious:

  1. because of the way that the gadget uses both user options and local storage, if the gadget is disabled without disabling the toggle it results in the two falling out of sync
  2. I tested the proposed patch locally, and it did not correctly disable the gadget, resulting in an immediate double invert

In general, I'm in agreement with Jon that our implementation was not written to be coexistent with the gadget, and I'm struggling to see a way for us to support both without a considerable amount of effort. If there's a particular reason you're trying to accomplish this we could see what can be done to help, but I don't think the proposed patch is the way to go

Hi there! Apologies for blocking your patch, but I did a great deal of research into the existing gadget when writing the code that is currently present and there are a few considerations here that are not immediately obvious:

  1. because of the way that the gadget uses both user options and local storage, if the gadget is disabled without disabling the toggle it results in the two falling out of sync
  2. I tested the proposed patch locally, and it did not correctly disable the gadget, resulting in an immediate double invert

In general, I'm in agreement with Jon that our implementation was not written to be coexistent with the gadget, and I'm struggling to see a way for us to support both without a considerable amount of effort. If there's a particular reason you're trying to accomplish this we could see what can be done to help, but I don't think the proposed patch is the way to go

That's like saying "It will hurt if you hit yourself in the head." And I want a button that's basically, "I know what I'm doing, so just enable these options." I get that from an engineering perspective, a lot of people in fact don't know what they're doing and will hit themselves in the head, and that my request might be a niche one. But I just find it user-hostile to make us choose between the gadget and the native dark mode, when all I want to do is test the latter so I can fix pages, templates and scripts for the lay readers who use it, while continuing to use the skin I prefer the rest of the time.

Makes sense, but let's consider that like you said if we were to provide this option a lot of users would end up "hitting themselves in the head" as you put it. While I hear what you're saying and don't disagree with the stated goal, it sounds like we're in agreement that the current approach in the patch would lead to a number of people other than you getting a broken experience and potentially being confused. Indeed, we added the logic that exists today in response to a number of people requesting it, given the confusing interaction between the gadget and our native implementation

That said, I hear what you're asking for and agree that it makes sense for the somewhat niche case you're describing. Let me think about whether there's an easy way to support it without compromising the existing user experience and I'll get back to you?

Sounds good.

How about a mw.config option that disables the disabling of the native dark mode, like wgPostEditConfirmationDisabled or thanks-confirmation-required? That way only those who are savvy enough to know how to edit their .js page will be able to turn it off.

Change #1051498 abandoned by Nardog:

[mediawiki/skins/Vector@master] Allow dark mode toggle gadget and night mode to coexist

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

all I want to do is test the latter so I can fix pages, templates and scripts for the lay readers who use it, while continuing to use the skin I prefer the rest of the time.

@Nardog from my understanding, it looks like the scenario your describing is that you'd like to use the native dark mode feature on Vector 2022, but want to keep using the dark mode gadget on other skins, and the issue is that when the gadget gets disabled in Vector 2022, it gets disabled for all other skins as well.

I think you could add some JS in your skin-specific user scripts that will run the gadget script only on the skin you want
e.g: https://en.wikipedia.org/wiki/Special:MyPage/vector.js

mw.loader.using( ['mediawiki.util', 'mediawiki.api', 'mediawiki.Uri', 'mediawiki.storage'], function() {
	importScript('MediaWiki:Gadget-dark-mode-toggle.js')
	importStylesheet('MediaWiki:Gadget-dark-mode-toggle-pagestyles.css')
	importStylesheet('MediaWiki:Gadget-dark-mode.css')
} )

@Jdrewniak That defeats the primary benefit of a dark mode gadget, which is that you don't get FOUCs.

Wouldn't the following line in user JS achieve what you need?:

$('#skin-client-pref-skin-theme-value-night').prop('disabled', false );

@Jdlrobson How can I reliably do that? The radio buttons are created client-side. It also feels ridiculous to have to essentially reverse what a script has done instead of preventing it from running in the first place.

ovasileva moved this task from Incoming to Groomed on the Web-Team-Backlog board.

Thanks for the report @Nardog. Marking as low priority for now as we've only received one request for this so far, but it is a valid use case so let's keep an eye to see if more folks are interested/running into this.

Nardog renamed this task from Allow enabling dark mode while using a dark mode gadget to Allow enabling dark mode while using a dark mode toggle gadget.Jul 11 2024, 2:17 PM
Nardog updated the task description. (Show Details)