====Background
This task is created based on user [[ https://wordpress.org/support/topic/use-only-for-search-no-link-preview/ | 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 [[ https://wordpress.org/plugins/wp-dark-mode/ | WP Dark Mode ]]), the results on the preview rendering are poor and non-permanent (goes away on page refresh)
|{F41876223 width=260}|
- 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
|Desktop view|Mobile view (馃寵 moon is user set) |
|{F42870901 width=260}|{F42871201 width=260}|
- 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 [[ https://wordpress.org/plugins/wp-dark-mode/ | 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 [[ https://github.com/wikimedia/wikipedia-preview | Wikipedia Preview library ]] as well as the [[ https://github.com/wikimedia/wikipediapreview-wordpress | 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 [[ https://support.google.com/chrome/answer/9275525?hl=en&co=GENIE.Platform%3DDesktop#:~:text=Manage%20Dark%20mode%20in%20Chrome,be%20in%20a%20dark%20theme. | this in Chrome ]] or directly going to chrome://settings/appearance
- You can use the [[ https://developer.chrome.com/docs/devtools/rendering/emulate-css#emulate_css_media_feature_prefers-color-scheme | 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`. 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 [[ https://wikimedia.github.io/wikipedia-preview/main/articles/spanish.html | 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 [[ https://wordpress.org/plugins/wp-dark-mode/ | 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.
|{F42969948 width=260}|{F42967979 width=260}|
===== 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.