Page MenuHomePhabricator

Community updates module: allow to set a white background for images in dark mode
Closed, ResolvedPublic3 Estimated Story Points

Description

Follow-up from T378770 where the background is been set as transparent by default. In order to avoid contrast issues between background and images used for community updates, allow communities to set a light background (white) for dark mode. The setting is not necessary for light mode where the background is already light.

Proposed solution: add a boolean type to opt in into having a white background for the image. Should appear below the image field in the community update form

Copy:

Label: Add a white background to the image in dark mode.
Description: If your image has a transparent background, it may be difficult to see in dark mode. If the text or icon is dark, adding a white background can ensure it remains visible in dark mode.

Design:

Screenshot 2025-03-07 at 14.21.53.png (284×1 px, 183 KB)

Acceptance criteria:
  • Communities can set a white background for a logo/image via Special:CommunityConfiguration/CommunityUpdates
  • Community Configuration migration to allow for the change. We should default to this setting being unchecked (in other words, leave this check box unchecked).

Event Timeline

Sgs renamed this task from Community updates module: allow to set a white background for dark mode images to Community updates module: allow to set a white background for images in dark mode.Mar 3 2025, 2:39 PM

@Sgs I want to work on this task can i start working on this and like u can tell me which file is allowed to update only

KStoller-WMF set the point value for this task to 3.Mar 3 2025, 5:11 PM

FYI: I've suggested potential copy, but I'm assigning to @JFernandez-WMF to review and finalize the copy and approve the suggested approach. I've also followed up with WMCZ's Educational Programs Manager so they are aware of this upcoming change.

Welcome, @UtsavSingh2824 ! I believe this task might be more complex than it first appears, but I'll have Growth team engineers follow up and suggest either a way to help start with this task, or a different task that doesn't require extensive knowledge of Community Configuration. Let us know if there is anything in particular that you are interested in exploring further! Thanks for taking interest in this task. :)

KStoller-WMF moved this task from Up Next to Current Sprint on the Growth-Team board.
KStoller-WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.

@Sgs I want to work on this task can i start working on this and like u can tell me which file is allowed to update only

Hello @UtsavSingh2824, thank you for your interest on contributing. This task entails work in several files from the GrowthExperiments extension. In particular GrowthExperiments integrates with another extension, CommunityConfiguration for allowing communities to configure some settings of GrowthExperiment's feature.

This task has two main areas of work:

  1. Adding a new property in the CommunityUpdatesSchema, probably a boolean, eg: shouldAddBackgroundInDarkMode and creating a migration for the schema change, see a complete guide on CommunityConfiguration's migration system in Extension:CommunityConfiguration/Technical_documentation#Migrations
  2. The second part is making use of the new configuration property to display or not a white background in dark-mode. In this case the relevant files are: CommunityUpdates.php and associated styles in modules/ext.growthExperiments.Homepage.styles/CommunityUpdates.less

Let us know if this serves for you to get kicked-off with this task. On the other hand, if you find the related work including a migration overwhelming for a first task, here's a list of alternative issues that you could work on, and we've filtered to be more appropriate as a "good first task", in the context of the Growth team work. And here's also a more broad list of "good first task" across other extensions and projects.

I agree with the copy that is being suggested with the description - maybe we can explain a little bit more why a dark mode specific image is needed? We can have the label + a description. Something like:

Label: Add a white background to the image in dark mode.
Description: If your image has a transparent background, it may be difficult to see in dark mode. If the text or icon is dark, adding a white background can ensure it remains visible in dark mode.

Screenshot 2025-03-07 at 14.21.53.png (284×1 px, 183 KB)

cc @KStoller-WMF

KStoller-WMF updated the task description. (Show Details)

I agree with the copy that is being suggested with the description - maybe we can explain a little bit more why a dark mode specific image is needed? We can have the label + a description. Something like:

Label: Add a white background to the image in dark mode.
Description: If your image has a transparent background, it may be difficult to see in dark mode. If the text or icon is dark, adding a white background can ensure it remains visible in dark mode.

Screenshot 2025-03-07 at 14.21.53.png (284×1 px, 183 KB)

+1. This description is more informative and correct than the one displayed in the design. The description in the design prompts for an image You can upload an alternate version which is miss-leading as it would also be added in light mode, while the checkbox scope is restricted to dark-mode.

Change #1127010 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] feat(CommunityUpdates): set a white background in night mode based on config

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

Change #1127010 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] feat(CommunityUpdates): set a white background in night mode based on config

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

Mentioned in SAL (#wikimedia-releng) [2025-03-18T15:18:42Z] <sergi0> run CommunityUpdates config schema migration foreachwikiindblist growthexperiments extensions/CommunityConfiguration/maintenance/migrateConfig.php CommunityUpdates (T387737)

Etonkovidova subscribed.

Checked on beta - works as expected:

white backgorund applied in CommunityConfiguratino
Screen Shot 2025-03-19 at 5.38.56 PM.png (596×678 px, 59 KB)
Screen Shot 2025-03-19 at 5.41.19 PM.png (598×670 px, 71 KB)
Screen Shot 2025-03-19 at 5.38.18 PM.png (618×838 px, 75 KB)
}
without white ground
Screen Shot 2025-03-19 at 5.35.03 PM.png (704×732 px, 63 KB)
Screen Shot 2025-03-19 at 5.36.48 PM.png (832×784 px, 83 KB)
Screen Shot 2025-03-19 at 5.34.02 PM.png (716×768 px, 78 KB)

Mentioned in SAL (#wikimedia-operations) [2025-03-27T16:14:21Z] <sergi0> Run foreachwikiindblist growthexperiments CommunityConfiguration:setVersionData CommunityUpdates 2.0.2 # T387737

Mentioned in SAL (#wikimedia-operations) [2025-03-27T16:22:09Z] <sergi0> Run foreachwikiindblist growthexperiments CommunityConfiguration:migrateConfig CommunityUpdates 2.0.3# T387737