Background

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

Problem

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)

• 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.

Design

• 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 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme (feel free to read for more context)

To test the Wikipedia Preview core update

• You can use https://wikimedia.github.io/wikipedia-preview/main/ 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: https://docs.npmjs.com/cli/v10/commands/npm-link.
• 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.

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.