====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|
|{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, light).
- Please note the half-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.
====Test 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.
- Test the preview card in both light and dark modes to ensure seamless transition between the
two.