Talk:Reading/Web/Accessibility for reading
![]() The following Wikimedia Foundation staff monitor this page: ![]() ![]() |
![]() Archives
|
---|
|
Quite hard to distinguish read and unread watchlist items in dark mode
editi'm not sure if it's just me or it's a kind of optical phenomenon, i find it quite hard to distinguish between read (normal font) and unread (bold) items in dark mode.
might have to do with the colour. for me it's easy to spot bold black text on white background or bold white text on dark background, but watchlist items are links so they have this purpleish colour in dark mode. RoyZuo (talk) 20:14, 14 February 2025 (UTC)
- actually no. for me bold white text on dark background is also hard to spot. RoyZuo (talk) 20:15, 14 February 2025 (UTC)
- For me, CJK characters are hard to distinguish between bold and normal in dark mode. Cookai🍪 (💬talk) 09:02, 15 February 2025 (UTC)
Dark mode usage stats
editAre there any stats available on how many (anonymous) readers use the dark mode on a given Wikipedia language version? --Paloi Sciurala (talk|contribs) 12:59, 19 February 2025 (UTC)
- Hey @Paloi Sciurala. I think we don't, but I've asked team members for confirmation. SGrabarczuk (WMF) (talk) 23:30, 24 March 2025 (UTC)
How to apply CSS styling for dark mode users only?
editI am writing MediaWiki scripts and gadgets and am struggling to find a clean, simple way to apply specific CSS rules only for users viewing the page in dark mode—whether as a result of their MediaWiki appearance preference being explicitly set to "Dark", or because their OS is in dark mode while their appearance preference is set to "Automatic".
The only working "solution" I’ve managed to implement so far is this:
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
/* Styles defined here will apply only to dark mode users. */
}
}
html.skin-theme-clientpref-night {
/* Styles defined here will also apply only to dark mode users. */
/* These must be EXACTLY the same styles as above, leading to messy duplication! */
}
As you can see, this is not a practical solution, as it forces me to duplicate every single dark-mode-only CSS rule for two distinct scenarios:
- The user’s OS is set to dark mode, and their MediaWiki appearance preference is set to "Automatic";
- The user’s MediaWiki appearance preference is explicitly set to "Dark".
Since the same CSS rules should apply in both cases, manually duplicating them across separate selectors is highly inefficient, especially given the large number of dark-mode-only rules.
I couldn’t find a simple solution, such as a common "dark-mode" class that applies to the <html>
or <body>
element for all dark mode users (and only for them).
Any help would be greatly appreciated! :) Guycn2 (talk) 20:00, 24 March 2025 (UTC)
Navbox in dark mode
editThere's a rule, coming from I don't know where, that overrides a border-top rule in en:Module:Navbox/styles.css, which leaves navboxes such as en:Template:States of Brazil in a weird state (in dark mode). Can this team help us with this issue? @UOzurumba (WMF), you left an invitation to this page on my talk page, can you help find the right person to fix the problem? The Navbox module is copied across many wikis. Thanks! ponor (talk) 20:14, 30 May 2025 (UTC)
- Hello I'd be happy to help but could you give me some more information? en:Template:States of Brazil looks fine to me in dark mode on English Wikipedia. Which wiki was it copied to that is not working?
- I noticed that https://hr.wikipedia.org/ is using a custom link color on dark mode (https://hr.wikipedia.org/wiki/MediaWiki:Night.css?ctype=text/css&action=raw), and I would highly discourage that as this is likely going to cause you a lot more issues with color contrast now and on the long run as it will not be tested for compliance against other colors. Please do not do this globally, it is hurting future accessibility of the site. Do this in user CSS or via an opt in gadget if you want it. Jon (WMF) (talk) 16:53, 2 June 2025 (UTC)
- @Jon (WMF): thanks for your reply! I've started phab:T395828 and uploaded a screenshot. The inner table borders are unevenly colored (Firefox for desktop, Firefox for Android, Chrome for Android). I'm sure I've seen a complaint about that on enwiki, though I can't remember where atm.
- As for the custom Night.css, I'll see what I can do; that has never been discussed on our wiki. Personally, I do like a little brighter blue (x-twitter has a similar one, I believe), as the original one is too dim and hard to read on all my screens. Are those colors still under discussion, and if yes - where? ponor (talk) 17:31, 2 June 2025 (UTC)
- Oh, here's the discussion: https://en.wikipedia.org/wiki/Template_talk:Navbox#c-Whatback11-20250429153300-Improved_readability ponor (talk) 17:34, 2 June 2025 (UTC)
- Jon, I've mentioned you in a new discussion on hrwiki here. ponor (talk) 17:51, 2 June 2025 (UTC)