== Background
This is a follow-up task to T361047. In that task, a dialog informing users of the new dark-mode feature was created. There was some discussion about //how// to present that dialog according to the following requirements:
~~- Promotional notification shown as soon as possible to logged and logged out readers who enrol in night mode "automatically"~~
- Promotional notification shown on second page load in a session to logged in and logged out readers who have day mode devices
- Notification only appears once, and is not shown again after it has been dismissed, regardless of the logged in or out status of the reader.
It was determined that this behaviour could be achieved by running the promotional notification as a CentralNotice banner and campaign, using the "impression diet" feature. This task concerns creating and testing that centralNotice campaign.
== User story
- As a reader with a device in dark mode, I want to know that night mode has been launched, so that I can change my dark mode settings if I wish.
- As a reader whose device is not in dark mode, I want to hear about night mode launching so that I can try it out if I want.
- //As a Wikipedian, if I see this notice more than once, I will not be pleased.//
== Requirements
Create a centralNotice campaign that can show a banner like the following:
https://meta.wikimedia.org/wiki/Main_Page?banner=sgrabarczuk_test
The banner should be shown:
- On the users first pageview if they are in dark-mode
- On the users second pageview if they are in light-mode
- After the banner has been shown once, it should never be shown again.
Both the campaign configuration and the banner code should work together to achieve these goals.
**Campaign configuration** using "impression diet" feature
https://meta.wikimedia.org/w/index.php?title=Special:CentralNotice&subaction=noticeDetail¬ice=sgrabarczuk_test
{F54295286}
**Banner code** (referencing "impression diet" key)
https://meta.wikimedia.org/wiki/Special:CentralNoticeBanners/edit/sgrabarczuk_test
```name=banner, lang=html
<script>
const CNContext = mw.centralNotice.kvStore.contexts.GLOBAL;
const CNBannerKey = 'impression_diet_minerva-dark-mode-banner';
const impressions = mw.centralNotice.kvStore.getItem( CNBannerKey, CNContext ) || {};
const matchMediaDark = window.matchMedia( '(prefers-color-scheme: dark)' );
const clientPrefDark = document.documentElement.classList.contains( 'skin-theme-clientpref-night' );
const clientPrefAuto = document.documentElement.classList.contains( 'skin-theme-clientpref-auto' );
const isPageInDarkMode = ( clientPrefDark || ( clientPrefAuto && matchMediaDark ) );
// Show banner for testing purposes when there's a query param of "banner"
if ( window.location.search.match( 'banner' ) !== null ) {
mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', function( require ) {
require( 'skins.minerva.DarkModeLaunchBanner')();
} );
}
// Show banner on first impression in dark-mode, or on second impression in light mode
if ( ( isPageInDarkMode && impressions.seenCount === 1 ) ||
( !isPageInDarkMode && impressions.seenCount === 2 ) ) {
mw.loader.using( 'skins.minerva.DarkModeLaunchBanner', function( require ) {
require( 'skins.minerva.DarkModeLaunchBanner')();
} );
}
</script>
```
=== Banner configuration
Dates: July 1 - July 15
Copy: //Dark mode for reading is now available! Please go to menu > settings to turn it on. //
=== BDD
- For QA engineer to fill out
=== Test Steps
- For QA engineer to fill out
== Design
Minerva notification on the left, Vector on the right
{F55439742}
Minerva Copy:
> Wikipedia’s new colors
> Try dark mode today
> Wikipedia is now available in dark mode. Try it out by tapping on “Settings” in the main menu.
> Go to Settings
Vector copy:
> Wikipedia’s new colors
> Try dark mode today
> Wikipedia is now available in dark mode. Try it out by clicking “Dark” in the “Color” section of the Appearance menu on the right.
== Acceptance criteria
- [ ] The banner code has been reviewed.
- [ ] A CentralNotice campaign that can display the promotional notification per the requirements has been created.
- [ ] The campaign has been tested and confirmed that it only shows the banner once.
- [ ] We've determined the parameters of this campaign
- how long do we want this campaign to be active
- Who is the audience for this campaign (all users?)
- When do we want to launch this campaign (when we launch dark-mode generally? during beta phase, ~~when we switch the default to automatic?~~)
== Communication criteria - does this need an announcement or discussion?
- A modal dialog can be disruptive to users, so some on-wiki discussion notifying users of this banner might be required.
== Rollback plan
- The campaign can be disabled instantly.
//This task was created by Version 1.0.0 of the [[ https://mediawiki.org/w/index.php?title=Reading/Web/Request_process | Web team task template ]] using [[ https://phabulous.toolforge.org/ | phabulous ]] //