catppuccin / catppuccin/userstyles

Wikipedia: Image preview carousel controls difficult to see

Open
#1,850 0 comments 0 reactions 0 assignees View on GitHub
0.kind: bug wikipedia
Dominant language
Less
Stars
1.1k
Forks
297
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue outlining your problem?

- [x] I am using the latest version of the provided userstyle.
- [x] I have searched the existing issues and they do not solve my problem.

### What userstyles are you seeing the problem on?

lbl:wikipedia

### Describe your problem.

Using any flavor but Latte for the Wikipedia user style renders the controls on the image preview carousel near impossible to see if the screen has any glare.

For example, the "X" button you click to close the preview is using the default background color, a transparent dark color (`#20212274`) on the black background but becomes opaque (`#202122`) on hover. The actual "X" symbol is made with a `mask-image` with a background color set to `--color-inverted-fixed`, which the theme overwrites with the value of `@crust` from the flavor.

For Latte, this is fine, as `#dce0e8` has some contrast from the near-black background, but the colors for Frappe (`#232634`), Macchiato (`#181926`), and Mocha (`#11111b`) are all way too close to the near-black background and only visible when hovered over, which makes finding them a pixel-hunt until the hover gives enough contrast to distinguish them.

To simplify, the theme overwrites a CSS variable used for the icon's color, but not the button's background color, and for the darker flavors of the theme, it ends up being near-black on near-black.

### Attach screenshots.

Example page: [https://en.wikipedia.org/wiki/Omega_Men#/media/File:OmegaMen.jpg](https://en.wikipedia.org/wiki/Omega_Men#/media/File:OmegaMen.jpg), opens the preview carousel of the infobox image.

Default Light:
Image
Default Dark:
Image

Catppuccin Latte:
Image
Catppuccin Frappe:
Image
Catppuccin Macchiato:
Image
Catppuccin Mocha:
Image
Mocha with different accent to show it has no effect:
Image

### What browser(s) are you seeing the problem on?

Firefox 142.0 on Windows 11

### Any additional comments?

Sorry if I was unclear or formatted my description badly, I'm happy to elaborate or answer any questions!

I'm a web dev myself so I'd be happy make a PR with a fix if someone can give me guidance on what colors from the theme should be applied here to look best. I imagine using one of the overlay colors on the button backgrounds would work, but I don't have an eye for design.

Contributor guide

Open the contributing guide

Research direction

Open the linked Wikipedia image-preview example and inspect the Wikipedia userstyle rules for the carousel controls, especially the close button, mask-image, and related CSS variables. Adjust the dark-flavor control contrast, then verify that the controls are distinguishable without hover in Frappe, Macchiato, and Mocha while preserving Latte behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.