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
- you'll learn how to enable the dark mode
- be able to ask questions about why the dark mode works this way
- We'll talk about the recommendations in https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis and why they are important.
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
- Phabricator task: https://phabricator.wikimedia.org/T362816
- Session slides: https://docs.google.com/presentation/d/1SIVrVy1S-S9qEtIXa__DcmMjn680sYvoiiSxBSeZk24/edit#slide=id.g200448c5fd7_0_2298
Presenter(s)
@[[phab:p/Jdlrobson/|Jdlrobson]]
Kim Sarabia
Justin Scherer
Participants
@Wfan
13 attendees
Notes
How to opt in (how to get dark mode on mobile):
https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis 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:
https://github.com/wikimedia/color-contrast-checker
Demo color contrast test
chrome/firefox extension plugin: https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf
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 (https://github.com/dequelabs/axe-core)
accessibility.test.js
node index.js --query "minervanightmode=1"
Test articles in Day-mode, using the WCAG contrast checker: https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Use_accessible_colors_which_pass_WCAG_AA_checks
How to help:
Testing
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
Questions
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: https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis
Q:
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 https://en.wikipedia.beta.wmflabs.org/wiki/Brown_bear
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 https://github.com/wikimedia/color-contrast-checker
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.
https://doc.wikimedia.org/codex/latest/design-tokens/definition-and-structure.html
Q: Do we want to have a dark mode banner too
A: (Peter) We will figure that out~