Page MenuHomePhabricator

Enable dark mode for logged-out users on the English Wiktionary
Closed, ResolvedPublic0 Estimated Story Points

Description

Now that Vector 2022 is the default skin on the English Wiktionary, we would like logged out users to be able to turn on dark mode. We've taken two approaches to making sure templates work well in dark mode:

  1. The Palette gadget provides CSS variables that automatically invert themselves in dark mode. You can see a table of all the Palette variables here. As a long-term project, we would like to convert all of our templates to use the Palette variables.
  2. The AutoContrastFixer gadget can handle templates not using the Palette variables by dynamically adjusting their colours. It's currently indicated as "experimental" but I think it's ready to be deployed by default (maybe @Surjection can comment?).

I've been using Vector 2022 with dark mode for some time and I haven't encountered any accessibility issues.

Event Timeline

Jdlrobson changed the task status from Open to In Progress.Jan 6 2025, 6:35 PM
Jdlrobson changed the task status from In Progress to Stalled.Jan 10 2025, 11:22 PM

When a community has fewer errors in the night mode theme than the light mode theme, the web team will consider broadening the release to desktop and all logged in users.

I evaluated the top 500 articles on Wiktionary and from what I can see, dark mode has more accessibility issues than light mode.
Please address the issues flagged here and we can reassess:

@Jdlrobson could you please retry the night mode check with the AutoContrastFixer gadget enabled? As explained in the issue description it is necessary to automatically fix contrast issues until all of our templates are updated.

@Jdlrobson could you please retry the night mode check with the AutoContrastFixer gadget enabled? As explained in the issue description it is necessary to automatically fix contrast issues until all of our templates are updated.

You must decide these gadgets are ready first for me to retry the dark mode check.
Dark mode can only be enabled when a solution exists for logged out users (rather than a potential one - the tools not good enough to do that right now).

That aside, we are planning our next set of deployments for early February so we still have time to rectify this and run it again once you've got acceptance from the community.

Importantly, you need to fix these issues via site CSS or template styles and should NOT resort to any JavaScript. For this reason, the AutoContrastFixer does not seem like the appropriate solution here, as for anonymous users this would negatively impact site performance. Applying JavaScript to fix templates will result in unnecessary repaints. The Italian Wikipedia did something similar which delayed the roll out of dark mode to anonymous users.

Note the initial goal here is accessibility. It is not about making sure all templates have a dark theme and use dark colors. For example for fixing accessibility issues in:
https://en.wiktionary.org/wiki/seks?vectornightmode=1&minervanightmode=1 you should add the notheme class to the inflection-table element to help unblock dark mode deployment and fix this template to use darker colors at a later date.

Happy to help in anyway I can.. just let me know what I can help with!

I evaluated the top 500 articles on Wiktionary and from what I can see, dark mode has more accessibility issues than light mode.
Please address the issues flagged here and we can reassess:

Is it possible to regenerate this list on a schedule, similar to what is done for the Wikipedias? We are actively working to resolve the issues and it would be great to keep track of progress.

I evaluated the top 500 articles on Wiktionary and from what I can see, dark mode has more accessibility issues than light mode.
Please address the issues flagged here and we can reassess:

Is it possible to regenerate this list on a schedule, similar to what is done for the Wikipedias? We are actively working to resolve the issues and it would be great to keep track of progress.

Done: https://night-mode-checker.wmcloud.org/
But note this only captures the top 50 most read, not the top 500 which is the criteria we use to enable dark mode and will only run daily, but hopefully it helps point you in the right direction. Note https://github.com/wikimedia/color-contrast-checker has some instructions on how you can run it locally or setup your own toolforge tool for your own project (https://github.com/wikimedia/color-contrast-checker?tab=readme-ov-file#for-wikis-wanting-dark-mode-for-anonymous-users)

Jdlrobson-WMF lowered the priority of this task from High to Medium.Jan 31 2025, 7:28 PM
Jdlrobson-WMF changed the task status from Stalled to In Progress.Feb 24 2025, 7:08 PM

I re-ran the reporting tool and I am now seeing less errors in dark mode than light mode [1]

For example https://en.wiktionary.org/wiki/de has 49 errors in light theme but 0 in dark mode.
Thanks to the community for all the efforts here. This looks really to be deployed whenever you are ready.

Web team can deploy this but it will likely be delayed, since we tend to batch our deployments.

[1] https://night-mode-checker.wmcloud.org/en.wikitionary-24-02-2025/

Jdlrobson-WMF renamed this task from Enable dark mode for logged-out users on the English Wiktionary to [1] Enable dark mode for logged-out users on the English Wiktionary.EditedFeb 28 2025, 11:54 PM
Jdlrobson-WMF changed the task status from In Progress to Open.
Jdlrobson-WMF set Final Story Points to 1.
Jdlrobson-WMF added a project: patch-welcome.

For some reason I can't set estimated story points on this task..?

Jdlrobson-WMF renamed this task from [1] Enable dark mode for logged-out users on the English Wiktionary to Enable dark mode for logged-out users on the English Wiktionary.Feb 28 2025, 11:54 PM
Jdlrobson-WMF changed the subtype of this task from "Administrative Request" to "Task".
Jdlrobson-WMF set the point value for this task to 1.

Thanks to the community for all the efforts here. This looks really to be deployed whenever you are ready.

We're ready when you are! How often are the batches taken care of?

I typically do batch deploys every 3 months for every wiki that is ready and our last deploy was early February so I'll probably get to this end of April/early May. I try to avoid adhoc deploys.

Any community member with Gerrit account can deploy this sooner if they have the capacity. I can provide a +1 review if that's helpful.

Jdlrobson-WMF changed the point value for this task from 1 to 0.

Done in T393386.