Page MenuHomePhabricator
Create Task
Maniphest T354843

[Night mode] Make all open-by-default global navigation appear in night mode on mobile
Open, HighPublic
Actions

Description

Background & User story

Why are we doing this ticket?

  • This ticket will allow all menus and other navigation that’s open by default to appear in night mode on the mobile site.

How does it connect to our overall plans? What goal does it link to?

  • See task tree

What previous/central documentation exists?

User Stories

  • As a night mode reader, I want all menus to appear in night mode, so that I am not distracted by portions of the page not appearing in my selected mode

Requirements

The following navigation must appear in night mode:

  • Article/talk tab
  • Article menu/AMC article menu (language, watch, history, etc)

Not included in this ticket
More menu, notifications, etc

Design

...

Acceptance criteria

  • All product and design requirements must be complete
  • ...

Developer notes on technical requirements and targets

…

Testing criteria

…

Signoff criteria

What is required to sign off this ticket?
How will this ticket be documented?
Have we updated the ticket description to reflect the final requirements?

Open questions:

…

Related Objects
Search...

StatusSubtypeAssignedTask
 OpenJdrewniakT341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
 OpenJdrewniakT341632 [EPIC] Palette customizations and dark mode
 OpenNoneT354835 [epic] Release night mode as a beta feature on desktop and mobile
 OpenNoneT354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
 OpenNoneT354843 [Night mode] Make all open-by-default global navigation appear in night mode on mobile
 ResolvedJdlrobsonT356074 Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties
 ResolvedovasilevaT356900 Regression: Issues with color-subtle (Codex .cdx-mixin-css-icon mixin doesn't work with CSS variables)
 ResolvedBUG REPORTJdlrobsonT356928 Regression: Visited links on mobile appearing as black
 ResolvedBUG REPORTJScherer-WMFT357381 Regression: Active link color is broken on mobile
 OpenNoneT356344 [Night mode] Templates can be fixed by editors when necessary for night mode
 DuplicateFeatureNoneT353887 Support prefers-color-scheme in css-sanitizer
 ResolvedSpikeJdlrobsonT356432 [spike] Audit broken experiences in templates night mode
 ResolvedJdlrobsonT357453 WCAG Color Contrast Violations in Infobox on Minerva Skin Night Mode
 ResolvedovasilevaT359658 [QA task] WCAG Color Contrast Violations in Infobox on Minerva Skin Night Mode
 ResolvedFeatureJdlrobsonT241946 Support @media (prefers-color-scheme: ...) rule in css-sanitizer
 DuplicateNoneT357585 WCAG Color Contrast Violations in Tables with Inline Style Attributes on Minerva Night Mode
 OpenBUG REPORTNoneT357575 File pages are not compatible with night mode
 ResolvedJdlrobsonT357717 Color Contrast Issue on Wikipedia Portal: Current Events
 ResolvedovasilevaT357721 Hatnote Color Contrast Issues Across Wikipedia Pages on Minerva Night Mode
 DuplicateJdlrobsonT358007 [French Wikipedia] Minerva Night Mode Color Contrast Issue - links in .bandeau-container .bandeau-section.bandeau-niveau-information
 ResolvedovasilevaT357722 Main pages should work in night mode
 In ProgressNoneT357730 Template:Track listing has color contrast issues with Minerva Night Mode
 DuplicateNoneT357733 Color Contrast Issue in ambox
 ResolvedJdlrobsonT357735 Color contrast issues with Template:Quote_box in Minerva Night Mode
 ResolvedBUG REPORTovasilevaT358608 Phonos is not night mode friendly
 ResolvedovasilevaT357998 Address color contrast issues in .wikitable
 ResolvedVolker_ET334790 tokens: Implement new static layout background-color tokens
 InvalidNoneT358000 Color Contrast Error - [style] Styling in .reference > a Element in Minerva Night Mode
 InvalidJdlrobsonT358004 Color Contrast Issue in Minerva Night Mode - table.sidebar Template
 DuplicateNoneT358005 Minerva Night Mode Color Contrast Issue - current-events-sidebar (Portal Pages)
 DuplicateNoneT358010 Main Page Template Color Contrast Issue in Minerva Night Mode
 StalledNoneT358013 Citation Reference Color Contrast Issue - Minerva Night Mode
 DuplicateNoneT358014 Color Contrast Issue in Minerva Night Mode - .colonnes.liste-simple
 ResolvedovasilevaT358015 Color Contrast Issue in Minerva Night Mode - a.mw-redirect
 OpenNoneT358387 [EPIC] Ensure all template text is readable in night mode: Fix all templates using background without color
 ResolvedJdlrobsonT358164 Set color/background to inherit or #333 on common templates/use of HTML4 bgcolor
 ResolvedJdlrobsonT358012 Navbox Related Color Contrast Issue in Minerva Night Mode
 ResolvedJdlrobsonT357726 Color contrast issue with Template:Side_box in Minerva Night Mode
 DuplicateJdlrobsonT358016 Other Projects Template Color Contrast Issue - Minerva Night Mode
 ResolvedJdlrobsonT358385 Address issues with usage of [bgcolor]
 ResolvedJdlrobsonT356899 [Spike] Explore automatic night mode fixes with content transform team
 ResolvedJdlrobsonT358238 Implement Linting Rule for Template Style Fixes
 ResolvedJdlrobsonT359205 Deployment Ticket - Linting Rule for Template Style Fixes
 ResolvedNoneT358241 Document new night mode linting rules
 DeclinedJdlrobsonT358239 Automatic Correction of Template and Inline Styles
 ResolvedSToyofuku-WMFT358240 [Spike 4hours] Performance Impact Assessment for Night Mode Style Correction
 ResolvedJdlrobsonT358388 Tag problematic pages with tracking category
 OpenKSarabia-WMFT358003 [3hr] [FRENCH WIKIPEDIA] Color Contrast Issue in Minerva Night Mode - .alternance
 ResolvedNoneT359488 Make MediaWiki:Minerva.css render blocking to allow editors to ship styles that fix issues with night mode
 OpenNoneT248416 [EPIC] Drop MediaWiki:Mobile.css and MediaWiki:Mobile.js in favor of TemplateStyles and MediaWiki:Minerva.css
 OpenEdtadrosT359644 Apply night mode fixes to French infoboxes
 ResolvedJdlrobsonT359983 Rename the skin night mode classes to something more sensible before they become widely used
 ResolvedJdlrobsonT360683 How should Template:Color work in night mode?
 OpenBUG REPORTNoneT360844 Links in elements with background color should become black so they are accessible
 ResolvedBUG REPORTovasilevaT357179 Page issues as rendered in article is not compatible with night mode
 OpenovasilevaT358192 [Bug] Page issues icon disappearing on click
 ResolvedBUG REPORTovasilevaT356822 Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode
 ResolvedBUG REPORTabi_T356821 Make <languages> compatible with night mode by using Codex design tokens
 ResolvedBUG REPORTNikerabbitT358381 Make Translate outdated translations text compatible with night mode
 ResolvedBUG REPORTovasilevaT359081 [Bug] Page previews currently does not work in night mode.
 OpenovasilevaT360877 [Bug] Page previews gradient not working in night mode
ResolvedBUG REPORTJdlrobsonT358822 Translate extension needs to import mediawiki.skin.variables to get night mode

Event Timeline

ovasileva created this task.Jan 11 2024, 10:56 AM
Jdlrobson moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.Jan 11 2024, 6:15 PM
ovasileva triaged this task as High priority.Jan 31 2024, 9:52 PM
ovasileva added a subtask: T356074: Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties.
ovasileva moved this task from Backlog to Milestones on the FY2023-24-WE 2.1 Typography and palette customizations board.
ovasileva added a subtask: T354889: Vector 2022 should use the experimental Codex build.Jan 31 2024, 10:46 PM
ovasileva removed a subtask: T354889: Vector 2022 should use the experimental Codex build.
Jdlrobson closed subtask T356074: Implement the dark mode color palette and switch LESS variables in Minerva to use it, degrade support for browsers that do not support CSS custom properties as Resolved.Feb 7 2024, 12:32 AM
ovasileva added a subtask: T357179: Page issues as rendered in article is not compatible with night mode.Feb 12 2024, 1:37 PM
ovasileva added a subtask: T356822: Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode.Feb 15 2024, 6:23 PM
ovasileva added a subtask: T356821: Make <languages> compatible with night mode by using Codex design tokens.Feb 16 2024, 1:18 PM
Tacsipacsi renamed this task from [Night mode] All global navigation open by default appear in night mode on mobile to [Night mode] Make all open-by-default global navigation appear in night mode on mobile.Feb 16 2024, 7:36 PM
Tacsipacsi updated the task description. (Show Details)
Tacsipacsi subscribed.

@ovasileva It took me a while to understand what you mean, so I’ve updated the title and description to make it easier to understand. Is it okay for you? Or did I maybe still not understand correctly what you mean and updated them with a misinterpretation?

In T354843#9550312, @ovasileva added 1 subtask(s): T356821: Make <languages> compatible with night mode by using Codex design tokens

Please note that the current patch on that task (and the description) doesn’t solve what this task (T354843) asks for: it fixes the language selector so that it appears in dark-on-light instead of light-on-light – readable, but still distracting and annoying at night. Due to the unique support policy of Translate, it cannot use Codex design tokens directly yet and thus it ignores the changed design token values in night mode.

ovasileva closed subtask T356821: Make <languages> compatible with night mode by using Codex design tokens as Resolved.Feb 19 2024, 12:18 PM
Tacsipacsi reopened subtask T356821: Make <languages> compatible with night mode by using Codex design tokens as Open.Feb 19 2024, 3:03 PM
ovasileva closed subtask T357179: Page issues as rendered in article is not compatible with night mode as Resolved.Feb 22 2024, 10:02 AM
Jdlrobson closed subtask T356821: Make <languages> compatible with night mode by using Codex design tokens as Resolved.Feb 23 2024, 8:24 PM
Edtadros reopened subtask T356821: Make <languages> compatible with night mode by using Codex design tokens as Open.Feb 23 2024, 8:26 PM
Tacsipacsi added a subtask: T358381: Make Translate outdated translations text compatible with night mode.Feb 23 2024, 9:23 PM
Jdlrobson closed subtask T356821: Make <languages> compatible with night mode by using Codex design tokens as Resolved.Feb 23 2024, 9:58 PM
Nikerabbit closed subtask T358381: Make Translate outdated translations text compatible with night mode as Resolved.Feb 29 2024, 7:48 AM
ovasileva added a subtask: T359081: [Bug] Page previews currently does not work in night mode..Mar 7 2024, 6:38 PM
Jdlrobson added a subtask: T358822: Translate extension needs to import mediawiki.skin.variables to get night mode.Mar 8 2024, 11:59 PM
ovasileva closed subtask T356822: Minerva/MobileFrontend icons not using embedded data URI rules should be compatible with night mode as Resolved.Mar 12 2024, 11:27 AM
Nikerabbit closed subtask T358822: Translate extension needs to import mediawiki.skin.variables to get night mode as Resolved.Mar 14 2024, 3:21 PM
ovasileva closed subtask T359081: [Bug] Page previews currently does not work in night mode. as Resolved.Mar 25 2024, 11:00 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL