Page MenuHomePhabricator

Support dark mode for Wikipedia Preview readers
Open, MediumPublic

Assigned To
Authored By
Aug 28 2023, 8:34 AM
Referenced Files
F42967979: truth matrix
Mar 21 2024, 8:42 PM
F42969948: wp-dark-mode
Mar 21 2024, 8:42 PM
F42871201: inuka-wikipediapreview-darkmode-mobile
Mar 20 2024, 7:42 PM
F42870901: inuka-wikipediapreview-darkmode
Mar 20 2024, 7:42 PM
F41890874: Wikipedia Preview Wordmarks .webm
Feb 14 2024, 5:36 AM
F41876223: Screenshot 2024-02-08 at 12.31 1.png
Feb 13 2024, 5:56 AM
F41876175: Close .svg
Feb 13 2024, 5:56 AM
F41876170: Wikipedia-wordmark-en_(inverted).svg
Feb 13 2024, 5:56 AM



This task is created based on user feedback highlighting issues with dark mode in Wikipedia preview.


Currently the Wikipedia Preview library has no support for dark mode features. And when using a Wordpress dark mode plugin (such as WP Dark Mode), the results on the preview rendering are poor and non-permanent (goes away on page refresh)

Screenshot 2024-02-08 at 12.31 1.png (640×360 px, 134 KB)
  • The Wikipedia wordmark is black and becomes invisible against the dark background in dark mode.
  • The close icon is grey, making it partially visible and challenging to interact with in dark mode.
  • Although the preview text is white and visible, the overall design needs optimization for dark mode to improve readability and usability.
Desktop viewMobile view (🌙 moon is user set)
inuka-wikipediapreview-darkmode (858×818 px, 203 KB)
inuka-wikipediapreview-darkmode-mobile (966×752 px, 161 KB)
  • Set the popup background color to #202122. This should be a static color across all dark themes.
  • Set the text color within the popup to #EAECF0.
  • Hyperlinks can use #3366cc
  • Lets get rid of semi-transparent overlay across all themes (dark and light).
  • Please note the 🌙 moon on the bottom right is part of the WP Dark Mode plugin, the user chooses whether to have the toggle visible or not
Acceptance Criteria
  • All elements of the Wikipedia preview card must be clearly visible in dark mode.
  • Users should be able to interact with all functional elements e.g. close the preview, click on read more link, etc.
  • Support is added to both the core Wikipedia Preview library as well as the Wordpress wrapper
Test cases and QA instructions

In order to test this dark mode feature, there are a couple of ways to emulate a dark setting.

  • You can set your system/browser settings to dark, for example like this in Chrome or directly going to chrome://settings/appearance
  • You can use the rendering tab from Chrome dev tools
  • One thing to understand about this solution is that the preview supports three configuration options: light, dark and detect (where detect is the default). When it's explicitly initialized with light or dark, changing the setting to dark won't have an effect because light and dark override detect. As you can infer, when set to detect the preview will render according to (feel free to read for more context)
To test the Wikipedia Preview core update
  • You can use for testing, setting dark mode using the rendering tab should switch the preview style.
  • Note the spanish article is set to dark already for testing convenience. That means, as explained above, changing the setting shouldn't have an effect and the preview should always render dark
To test the Wordpress wrapper
  • Install the WP Dark Mode plugin in your local setup, this is the only plugin that's supported (also the main one by number of downloads)
  • If the core update hasn't been released to npm by the time you test, you will have to npm-link the two projects. Please read for more info:
  • The idea is the same as above, the preview will render according to whether it's set to light dark or detect. In this case the testing is linked to the workings of WP Dark Mode, check out the admin panel in your dashboard, note there are two general options: "Default dark mode" and "Use system settings" (see below, ignore other paid settings)
  • We can form a truth matrix based on the possible combinations as shown in the table below, you can use it for guidance while testing
  • Please note Wordpress doesn't really respect or support the a user's browser/system settings (it's all based on Wordpress themes which predate dark mode features), so you should lean on using the rendering tab when possible.
wp-dark-mode (990×2 px, 292 KB)
truth matrix (346×2 px, 69 KB)
In both cases
  • Ensure that all text and icons on the preview card are clearly visible against the dark background.
  • Confirm that all interactive elements like links and close icons work as expected.

Event Timeline

PWaigi-WMF triaged this task as Medium priority.Oct 19 2023, 2:36 PM
PWaigi-WMF moved this task from Backlog to Ready for Dev on the Inuka-Team (Kanban) board.

the previous spike ticket was waiting for the design feedback.

Do we have a list of languages for which we are using local wordmarks? As of now I have only provided one for the english one but can do the same for other languages too.

Do we have a list of languages for which we are using local wordmarks? As of now I have only provided one for the english one but can do the same for other languages too.

Do we have a list of languages for which we are using local wordmarks? As of now I have only provided one for the english one but can do the same for other languages too.

I tried a quick css code to invert the wordmark and it seems to be working fine with dark more. This inverts the its current version to white one.

.wikipedia-preview-header-wordmark-with-image {
  filter: invert(1);

The solution we are working on has two parts: an update to the core wikipedia-preview library and another update to the wikipediapreview-wordpress wrapper.

This is the PR for the first part: