Page MenuHomePhabricator

[Session] Preparing for dark mode on Wikimedia sites
Closed, ResolvedPublic


Title of session: Preparing for dark mode on Wikimedia sites
Session description: In June dark mode will be available for mobile and desktop for anonymous and logged in users. This workshop will help prepare your code/templates.

In the session

Username for contact: @Jdlrobson
Session duration (25 or 50 min): 50 mins
Session type (presentation, workshop, discussion, etc.): presentation + workshop
Language of session (English, Arabic, etc.): English
Prerequisites (some Python, etc.): Template editing permissions or/and able to contribute to Wikimedia code via Gerrit.
Any other details to share?:
Interested? Add your username below:

Notes from session:

Preparing for dark mode on Wikimedia sites

Date and time: 03.05.2024 14:00 - 15:00

Relevant links


Kim Sarabia
Justin Scherer


13 attendees


How to opt in (how to get dark mode on mobile):
1: Login -> settings -> click advanced mode -> toggle "night: theme
2: or add ?minervanightmode=1

Technical approach to dark/night mode
Design tokens : use design token from codex like @color-base rathrer than color: #222
Mask-image for icons
CSS invert filter

You can no longer rely on inheriting colors if you are changing backgrounds

Help Needed:
Adopt codex design tokens
use codex or ooui when building project

Tools to help:
Demo color contrast test
chrome/firefox extension plugin:
WCAG AA: color ratio: 3 to 1 contrast ratio
Goal is to access colour contrast across all the top wikipedia articles.
Uses the Axe-core library for testing (
node index.js --query "minervanightmode=1"

Test articles in Day-mode, using the WCAG contrast checker:

How to help:
Enable dark mode on your devices and report bugs.
Gerrit patches:
Still various extensions using hard coded variables via design tokens. Help us fix them during the hackathon.
Interface admins
If you are a template editor help us prepare your project for night theme by fixing templates.
Design feedback
Tell us how we can improve the theme
Talk to our designer about how to get your code/gadget working in dark mode


Q: is only for mobile now?
A: Desktop will be in beta this month \o/

Q: is that we getting the individual bug for color contrast and update it
A: Focus on the template now

Q: Maybe ppl will not realized the color ratio
A: We have designer to find that for that also

Q: How do we test that dark mode

A: OOUI currently does not work but there are plans for that.

Q: this mobile one request betat version credentials
A: use desktop mode, then no need to login

Q: Do we have adaptive features for images with backgrounds
A: Not right now, But the SVG templates can be updated to have a white background

Q: Can you use CSS variables in Template Styles
A: Yes, you can use them. We're trying to encourage use of design tokens. You can write a user design token and that would work.

Q: Are we able to use some extension like Axe tool to find the color contrast issue
A: We can but not depends on that, sugeest to use the

Q: Could we simply to invert color based on mode selection?
A: Do not invert color, as some color in the page is specific to mean something, e.g. Congress in phillipine

Q: How do you override and give it a white background?
A: The CSS tokens can be used for the background colour base and add class to any element
prefer to have accessable but ugly instead of not accessable but pretty

Q: Is the link must be blue?
A: Blue have so many different mean ilke inactive link, clicked link, we have them all of them accessable for dark mode, and they are not necessary to be blue.

Q: How do you pull darkmode into an extension.
A: Use Codex tokens and import the mediawiki skin variables that codex provides and use them.

Q: Do we want to have a dark mode banner too
A: (Peter) We will figure that out~



Event Timeline

Hi @Jdlrobson - you signed up for two sessions in the same day - is that on purpose?

debt triaged this task as Medium priority.

@debt I signed up for two slots to make the session 50 minutes - should I not do that and do something else? Thanks in advance!