Page MenuHomePhabricator

plainlinks class needs friendlier styles for dark mode
Closed, InvalidPublic

Assigned To
None
Authored By
Izno
Apr 4 2024, 8:15 AM
Referenced Files
F58205091: Screenshot_20250113_190149-2.png
Jan 15 2025, 2:35 PM
F58205072: JWHkiEv.png
Jan 15 2025, 2:35 PM
F58205073: 7YKiabC.png
Jan 15 2025, 2:35 PM
F58205074: PjAJfh4.png
Jan 15 2025, 2:35 PM
F58205075: m7wvQhx.png
Jan 15 2025, 2:35 PM
F58205076: wuKJhtD.png
Jan 15 2025, 2:35 PM
F44455769: image.png
Apr 4 2024, 8:15 AM

Description

As seen on https://en.wikipedia.org/wiki/G%C3%B6lba%C5%9F%C4%B1,_Ad%C4%B1yaman?useskin=minerva&minervanightmode=1 , .plainlinks a.external needs a style friendlier for dark theme.

image.png (971×461 px, 43 KB)

According to console, the current rule is

@media screen {
  .plainlinks a.external {
    background: none !important;
    padding: 0 !important;
  }
}

where the intent of the class is to override the image that you would normally find on a.external links. Minerva applies it as:

a.external,
.mw-parser-output a.external--reference {
  background-image: url(/w/load.php?modules=skins.minerva.content.styles.images&image=a.external%2C+.mw-parser-output+a.external&variant=reference&format=original&lang=en&skin=minerva&version=1g49l);
}

a.external, .mw-parser-output a.external {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 10px;
  padding-right: 13px;
}

whereas Vector 2022 applies it as:

@media screen {
  .mw-parser-output a.external {
    background-image: url(/w/skins/Vector/resources/skins.vector.styles/images/link-external-small-ltr-progressive.svg?fb64d);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
  }
}`

For some reason Minerva's

html.skin-theme-clientpref-night .mw-parser-output [style*="background"] {
  color: #333;
}

is triggering here??? The link somehow has hard colors set? <a style="background: rgb(255, 221, 221)>... shows up in the HTML?

Event Timeline

Izno updated the task description. (Show Details)
Izno updated the task description. (Show Details)

I think this is caused by https://en.wikipedia.org/wiki/User:Headbomb/unreliable.js which applies #ffdddd background color as inline style to a.external when a link to wikipedia gets matched. plainlinks overrides the background color, but the inline style persists and gets chatched by the night mode rule.

Jdlrobson changed the task status from Open to Stalled.Apr 5 2024, 2:56 AM
Jdlrobson subscribed.

This rule exists because of https://en.m.wikipedia.org/wiki/Special:LintErrors/night-mode-unaware-background-color - for most elements this fixes the item in night mode but there are cases like this one where it doesn't work as expected.

Most time background color is set it assumes the color of text is black. It looks like somebody since removed the style attribute from the link which looks like the correct fix to me. Can somebody confirm?

I think this is caused by https://en.wikipedia.org/wiki/User:Headbomb/unreliable.js which applies #ffdddd background color as inline style to a.external when a link to wikipedia gets matched. plainlinks overrides the background color, but the inline style persists and gets chatched by the night mode rule.

I think you're right, I think it's unreliable.js. I am surprised Firefox normalizes it to the rgb code in the console?

I'm not really sure how to best deal with this one, but I think that's something I can munge onwiki somehow.

I got a collection of examples at: https://imgur.com/a/y45ddro (edit: images re-uploaded and shown in a comment just bellow)

There are some ways this could be fixed:

  • Templates could opt for using relative urls intead of the full external url. It's nice, but it also doesn't fix for all cases, Like the main page that has reference to the wiki of different languages.
  • unreliable.js could do the fix on their side.

Another option would be to add the :not(.external) to the css code.

html.skin-theme-clientpref-os .mw-parser-output [style*="background"]:not(.external)

@Arthurfragoso: Please upload and attach image screenshots here. Visiting "imgur.com" requires 74 (!) clicks in their dialogs (which do not offer a "Refuse all" button) not to sell my data to their 248 advertisement company partners.

@Aklapper: I'm sorry.

1:

wuKJhtD.png (2,252×1,225 px, 314 KB)

2:

m7wvQhx.png (2,047×865 px, 312 KB)

3:

PjAJfh4.png (1,592×885 px, 220 KB)

4:

7YKiabC.png (1,816×543 px, 124 KB)

5:

JWHkiEv.png (1,617×905 px, 253 KB)

And an extra that wasn't in the imgur page:

6:

Screenshot_20250113_190149-2.png (1,630×629 px, 214 KB)

I discussed it briefly at:
https://en.wikipedia.org/wiki/User_talk:Headbomb/unreliable#Solution_for_some_dark_mode_issues

Another option could be:

html.skin-theme-clientpref-night .mw-parser-output [style*="background"]:not(.plainlinks a.external)