Hi @Jdlrobson, we have a notice component with background-color: @background-color-notice-subtle. This is what it looks like in day and night reading modes:

Day	Night

Text, icons, and borders adjust correctly but @background-color-notice-subtle doesn't seem to be redefined. Should it be? Is there a better-suited variable to use in this case? Thanks

Change 1007435 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Support night reading mode

https://gerrit.wikimedia.org/r/1007435

@SBisson thanks for flagging. We'll define the @background-color-notice-subtle our side https://gerrit.wikimedia.org/r/c/mediawiki/skins/MinervaNeue/+/1006981 - that's definitely our bug.

@SGautam_WMF this is what the text highlight currently looks like in day and night modes:

Let me know what you think of the white on yellow.

@Jdlrobson is there an official mechanism for us to specify light and dark colors for those special cases where we're not using existing variables? The yellow highlighting above is one such example.

We don't currently have an official mechanism but my expectation is we will. For now you can do this and we'll clean that up for you later:

.ext-wikistories-article-view-content-sentence-selected {
   /* FIXME: Hardcoded light version of @color-base  until T358826 has been resolved */
    color-scheme: light;
    color: #333;
    background-color: #fc3;
    position: relative;
}

}

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3975ae0319/w

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/65ec70057b/wiki/Douglas Adams

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/86a47ae45b/wiki/Douglas Adams

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/86a47ae45b/w/

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/3975ae0319/w/

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/65ec70057b/w/

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d4140638e9/wiki/Douglas Adams

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d4140638e9/w/

Test wiki created on Patch demo by HTan (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/30f3f39dcd/wiki/Douglas Adams

Test wiki on Patch demo by HTan (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/30f3f39dcd/w/

Change 1007435 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Support night reading mode

https://gerrit.wikimedia.org/r/1007435

Change 1009602 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/Wikistories@master] Update style

https://gerrit.wikimedia.org/r/1009602

@Jdlrobson What if we need to hardcode different custom colors for day and night modes, what would be the preferred way?

You can use the CSS classes html.skin-night-mode-clientpref-1 and html.skin-night-mode-clientpref-2 to target the element to give it different colors (see https://www.mediawiki.org/wiki/Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Target_night_mode_using_standard_media_query for more information). Does this answer your question?

Yes. I saw those classes but I wasn't sure if they were too "internal" for us to use.

No those are stable for use! Go ahead and use.

If we ever change the classes, we'll make sure to make them in a backwards-compatible way.

Change 1009602 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Update night mode style

https://gerrit.wikimedia.org/r/1009602

@SBisson Seems like most of the basic functions are looking and working correctly except for the ones I found below in the Issue section. Please let me know if you want me to create separate tasks or leave those issues on this task.

Status: ❌ FAIL
Environment: Beta: 1.42.0-alpha (2a65e7f)
OS: macOS Sonoma 14.4.1
Browser: Chrome 123
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

✅AC1: https://phabricator.wikimedia.org/T356529 - Looks like most of the basic functions are working correctly.

❌Issues:

1. Icon- Can the Duplicate Icon be a different color like the others to have it stick out more? Being dark grey makes it look hidden on a black background compared to yellow like the others.

Duplicate	Removing Text	Outdated Text

2. Replacing a picture on a phone vs desktop- On the phone, it switches up pictures from the one I'm trying to select.

@SGautam_WMF what do you think about the icon contrast issue reported above?

2. Replacing a picture on a phone vs desktop- On the phone, it switches up pictures from the one I'm trying to select.

@SBisson Not sure what happened after checking it today, but it works now. I guess it was just a weird one-off? I'll wait to see what you say about the duplicate icon before I move this task, if you want a separate task for it, or if that is fine.

In T356529#9669000, @SBisson wrote:

@SGautam_WMF what do you think about the icon contrast issue reported above?

Sorry for late reply, is it possible for us to invert it or shall I provide dark mode friendly icon for this case?

Change #1017301 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] 3 more night mode fixes

https://gerrit.wikimedia.org/r/1017301

In T356529#9692035, @SGautam_WMF wrote:

In T356529#9669000, @SBisson wrote:

@SGautam_WMF what do you think about the icon contrast issue reported above?

Sorry for late reply, is it possible for us to invert it or shall I provide dark mode friendly icon for this case?

I have made the inversion in a new patch.

Change #1017301 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] 3 more night mode fixes

https://gerrit.wikimedia.org/r/1017301

@SBisson I am noticing the following color contrast issues on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930
I think the + should be black? The latter seems like a false positive though.

@SBisson So I see the duplicate icon having skin invert with a lighter grey icon and the "skin invert" tag. For the image icons, I did not see a difference and did not see the "skin invert tag". When I put "skin invert" in, it didn't work since the exclamation point was black. As for the menu items, I do see it got a little lighter. Was that what you were talking about in the screenshots?

Status: ❌FAIL
Environment: Beta: 1.43.0-alpha (6c53f10)
OS: macOS Sonoma 14.4.1
Browser: Chrome 123
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

❌AC1: https://phabricator.wikimedia.org/T356529

Updates	Previous	Current
Duplicate icon
Images icon
Menu content

@Jdlrobson About the "Create a Wikistories" button, when looking at day/night modes side-by-side I agree it could look better inverted by since background-color and color are both hardcoded, and as a result the same in both modes, I'm not sure this creates a contrast issue. So for this and the other screenshot, I would defer to our designer, @SGautam_WMF.

Change #1024480 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Night mode: invert warning icons on thumbnails

https://gerrit.wikimedia.org/r/1024480

@GMikesell-WMF If I understand correctly the results in the table above, the only issue is the warning icon in the bottom-right corner of the image thumbnail not being inverted. I have made new patch to actually invert it, just like it's counterpart in the second section of the story text box.

Change #1024480 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Night mode: invert warning icons on thumbnails

https://gerrit.wikimedia.org/r/1024480

@SBisson The duplicate image icons have now been resolved. From above and below which are now passed, I will move this to Design sign-off. Thanks for all your work!

Status: ✅ PASS
Environment: Beta: 1.43.0-alpha (2c7e3ad)
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Skins. Minerva
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=Dog&minervanightmode=1
https://en.m.wikipedia.beta.wmflabs.org/wiki/Special:StoryBuilder/Story:Testing_post_dark_theme?frameid=0&minervanightmode=1#story

✅ AC1: https://phabricator.wikimedia.org/T356529

Night Mode	Desktop	iPad Pro	iPhone 14
Wikistories
Duplicate Icon

In T356529#9723363, @Jdlrobson wrote:

@SBisson I am noticing the following color contrast issues on https://en.m.wikipedia.beta.wmflabs.org/w/index.php?title=T352930
I think the + should be black? The latter seems like a false positive though.

@SBisson is background color for circle on which (+) icon sits hardcoded? and is it #B0ADAD?

Few more items to test for this one.

1. Open a wikistory using the share link. Viewer experience looks broker here.

2. Author name from the attribution space is not visible.

3. We have text fade to long story text. We need to adjust it for dark mode too.

@SBisson how about we try this for Thumbnail placeholder? I didn't find the border in the code

For Light Mode:
.ext-wikistories-discover-item-btn, .ext-wikistories-discover-item-cta-btn {

background-color: #54595D; 
color: #eaecf0;

}
For Dark Mode:
.ext-wikistories-discover-item-btn, .ext-wikistories-discover-item-cta-btn {

background-color: #eaecf0; 
color: #54595D;

}

@Jdlrobson would you know how to write a linear-gradient that goes from @background-color-base to transparent? This is what we currently have: background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, #fff 100% ); I would like it to be implemented with variables so it inverts correctly.

EDIT: apparently I can just write linear-gradient( to bottom, transparent 0%, @background-color-base 100% );

I tried simply writing a night mode version of it under the html.skin-theme-clientpref-night selector but I ran into a different issue: we have custom action that outputs a custom version of the story viewer that is used for sharing on social media. It doesn't have the usual mediawiki chrome because of $out->setArticleBodyOnly( true );. While it has the skin-theme-clientpref-night class on the body, the colors are not inverted. See https://en.m.wikipedia.beta.wmflabs.org/wiki/Story:Dogs?action=storyview&minervanightmode=1

Change #1026179 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/Wikistories@master] Night mode fixes

https://gerrit.wikimedia.org/r/1026179

Pending patch update

Test Result - Beta

Status: ❌ Fail
Environment: Beta
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Device: MBA
Emulated Device:BrowserStack

Test Artifact(s):

Test Steps

T356529#9760694
❌AC1: "+"Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/South_Park?minervanightmode=1

"+" black

❌AC2: Open BrowserStack ex. Samsung S22 Ultra and go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

text fading- Mobile

❌AC3: Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

Author visibility- Mobile	Author visibility- Desktop

Change #1026179 merged by jenkins-bot:

[mediawiki/extensions/Wikistories@master] Night mode fixes

https://gerrit.wikimedia.org/r/1026179

@SBisson This task has now passed. I just have a quick question regarding "+" icon being dark since it may be hard to see. I will move this to design sign-off. Thanks for all your work!

Status: ✅PASS
Environment: Beta
OS: macOS Sonoma 14.5
Browser: Chrome 125
Device: MBA
Emulated Device: BrowserStack

❌AC1: "+"Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/South_Park?minervanightmode=1

✅ "+" is now dark. It does look a little hard to see though, is this what you want?

❌AC2: Open BrowserStack ex. Samsung S22 Ultra and go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

✅ Text fade has been resolved

❌AC3: Go to https://en.m.wikipedia.beta.wmflabs.org/wiki/Dog?minervanightmode=1#/story/278684

✅ Author is now visible

I'm assuming no further help is needed from web team, but please feel free to re-tag us if necessary! Can this be resolved now?