Page MenuHomePhabricator
Create Task
Maniphest T354891

[Design] Implement the dark mode color palette and switch LESS variables in Vector to use it
Closed, ResolvedPublic
Actions

Description

We need to define a set of colors that will be used in dark mode. List of colors doesn't need to be final just something to get us started.

TODO

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedovasilevaT341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations
 ResolvedovasilevaT341632 [EPIC] Palette customizations and dark mode
 ResolvedovasilevaT354835 [epic] Release night mode as a beta feature on desktop and mobile
 ResolvedJdlrobsonT354836 [goal] Allow desktop and mobile page chrome to appear in night mode ahead of beta release
 ResolvedovasilevaT354837 [Night mode] Page background appears in night mode on desktop
ResolvedovasilevaT354838 [Night mode] Page background appears in night mode on mobile
 ResolvedJScherer-WMFT356825 Implement the new night mode color palette in Minerva
 ResolvedovasilevaT357759 Deploy night mode on the minerva skin on test wiki
 ResolvedSpikeSToyofuku-WMFT357077 [Spike] Explore different options for code sharing of page-specific configuration between Minerva and Vector
 ResolvedovasilevaT354842 [Night mode] All global navigation open by default appear in night mode on desktop
 ResolvedovasilevaT354843 [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
 ResolvedJdlrobsonT356344 [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
 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
 ResolvedJdlrobsonT357730 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
 DuplicateNoneT358013 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
 ResolvedJdlrobsonT358387 [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
 ResolvedKSarabia-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
 ResolvedovasilevaT359644 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?
 ResolvedBUG REPORTJdlrobsonT360844 Links in elements with background color should become black so they are accessible
 DuplicateBUG REPORTNoneT365318 Dark/night mode shouldn't reset .metadata styles
 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.
 ResolvedJdlrobsonT360877 [Bug] Page previews gradient not working in night mode
ResolvedBUG REPORTJdlrobsonT358822 Translate extension needs to import mediawiki.skin.variables to get night mode
 ResolvedovasilevaT356341 [Night Mode] I want to opt into or out of night mode on mobile
 ResolvedovasilevaT355065 Set up feature flag and menu for night mode on desktop
 ResolvedovasilevaT357707 Re-order Vector preferences - night mode should be above limited width
 ResolvedovasilevaT355118 Set up feature flag for night mode on mobile
 ResolvedovasilevaT355705 Allow pages to not appear in night mode
ResolvedFeatureNoneT328850 Minerva/Vector: Dark mode toggle needs to be tri state
 OpenNoneT362923 Dark mode toggle needs to be tri state in Extension:DarkMode
 ResolvedovasilevaT356653 Show a toast notification on page load for night mode when the setting doesn't take effect in Minerva
 ResolvedovasilevaT358811 Set Minerva default to day mode
 ResolvedovasilevaT361047 Minerva Night Mode launch notifications
 ResolvedovasilevaT363814 Release dark mode as a beta feature on desktop (May 15th)
ResolvedJdrewniakT354889 Vector 2022 should get night theme
 ResolvedJScherer-WMFT354891 [Design] Implement the dark mode color palette and switch LESS variables in Vector to use it

Event Timeline

Jdlrobson created this task.Jan 11 2024, 6:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 11 2024, 6:02 PM
Jdlrobson assigned this task to JScherer-WMF.Jan 11 2024, 6:02 PM
Jdlrobson triaged this task as High priority.
JScherer-WMF added a subscriber: DTorsani-WMF.Jan 12 2024, 4:58 PM

cc @DTorsani-WMF This ticket is a placeholder colour palette to unblock dev and so we can go find edge cases.

JScherer-WMF added a comment.Jan 12 2024, 6:05 PM

Color: Standard
@color-base: 202122
@color-subtle: 54595d
@color-link: 36c
@color-link-new:36c
@color-link-selected:2a4b8d
@color-placeholder: 72777d
@color-emphasized: 000
@color-progressive: 36c
@color-destructive: d73333
@color-progressive--hover: 447ff5
@background-color-base: fff
@background-color-secondary: ??
@background-color-secondary--modern: ??
@color-visited: 6b4ba1

Color: Night
@color-base: #EAECF0 gray200
@color-subtle: #C8CCD1 gray300
@color-link: #6699FF blue300
@color-link-new: #6699FF blue300
@color-link-selected: #94B8FF

  • derived from blue300 + 30% white

@color-placeholder: #A2A9B1 gray400
@color-emphasized: #FFFFFF
@color-progressive: #6699FF blue300
@color-destructive: #FF4242 red500
@color-progressive--hover: #94B8FF
@background-color-base: #202122 gray700
@background-color-secondary: #2E3136 gray675
@background-color-secondary--modern: #202122 gray700
@color-visited: #9781BD

  • derived from color-visited + 30% white

To start, I mostly used colours from the Android dark mode palette with the addition of a new visited link colour.
Could we also add underlines to all links?
text-decoration: underline; everywhere and then

For standard and small sizes:
text-underline-offset: 4px;

For large sizes:
text-underline-offset: 6px;

JScherer-WMF moved this task from Ready for Development to Ready for Signoff on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.EditedJan 12 2024, 6:07 PM

cc @Jdlrobson added the values to the sibling ticket

JScherer-WMF updated the task description. (Show Details)Jan 12 2024, 6:08 PM
Jdlrobson closed this task as Resolved.Jan 12 2024, 6:10 PM
Jdlrobson mentioned this in T354889: Vector 2022 should get night theme.

Perfect! Thanks Justin!

ovasileva added a parent task: T354889: Vector 2022 should get night theme.Jan 15 2024, 9:00 AM
ovasileva added a project: FY2023-24-WE 2.1 Typography and palette customizations.
ovasileva subscribed.
Jdlrobson mentioned this in 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.Jan 29 2024, 4:18 PM
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 · Credits