Skip to content

fix: make GsocProjectWidget and bottom sheet dark-mode friendly#451

Closed
adityashirsatrao007 wants to merge 1 commit into
andoriyaprashant:mainfrom
adityashirsatrao007:fix/dark-mode-images-background
Closed

fix: make GsocProjectWidget and bottom sheet dark-mode friendly#451
adityashirsatrao007 wants to merge 1 commit into
andoriyaprashant:mainfrom
adityashirsatrao007:fix/dark-mode-images-background

Conversation

@adityashirsatrao007

Copy link
Copy Markdown
Contributor

Problem / Issue No.

Describe Problem / Root Cause

  • In dark mode, GSoC project organization showcase images with white backgrounds stood out harshly, and the parent container had a hardcoded color: Colors.grey[100] background, which rendered as a bright box in dark mode.
  • In addition, the bottom sheet background (Colors.white) and project detail cards (color: Colors.grey[100]) were not dark-theme compatible.

Solution proposed

  • Modified GsocProjectWidget.dart to make the image container's background adaptive (isDarkMode ? Colors.grey.shade800 : Colors.grey[100]).
  • Wrapped Image.network in a ColorFiltered with BlendMode.multiply in dark mode to blend white-background images with the dark container.
  • Updated the bottom sheet background to be dark-theme compatible (backgroundColor: isDarkMode ? Colors.grey.shade900 : Colors.white).
  • Made the project detail cards and text inside the bottom sheet adaptive to dark/light mode.

Additional Information

  • Tested on responsive viewports; layout is fully preserved.

Screenshots

  • Updated: Clean dark container with blended organization images.

Copilot AI review requested due to automatic review settings May 30, 2026 10:04
@netlify

netlify Bot commented May 30, 2026

Copy link
Copy Markdown

Deploy Preview for aquamarine-kheer-83feda failed. Why did it fail? →

Name Link
🔨 Latest commit d15030c
🔍 Latest deploy log https://app.netlify.com/projects/aquamarine-kheer-83feda/deploys/6a1ab6178d6c41000969c3a0

@github-actions

Copy link
Copy Markdown

Thank you for submitting your pull request! We'll review it as soon as possible.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds dark mode support to the GSoC project widget, adjusting colors for the modal bottom sheet, image container, and project cards based on the current theme brightness.

Changes:

  • Use theme-aware colors in the modal bottom sheet and image container, with a ColorFiltered wrapper for the image in dark mode.
  • Pass BuildContext into _buildProjectCard and derive card/text/title colors from the theme.
  • Wrap the image container with a BoxDecoration (rounded corners) instead of a flat color.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

onPressed: () {
showModalBottomSheet(
backgroundColor: Colors.white,
backgroundColor: isDarkMode ? Colors.grey.shade900 : Colors.white,
Comment on lines +128 to +143
child: isDarkMode
? ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey.shade800,
BlendMode.multiply),
child: Image.network(
modal.imageUrl,
width: 80,
height: 80,
),
)
: Image.network(
modal.imageUrl,
width: 80,
height: 80,
),
Comment on lines +128 to +132
child: isDarkMode
? ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey.shade800,
BlendMode.multiply),
Comment on lines +185 to +187
final cardColor = isDarkMode ? Colors.grey.shade800 : Colors.grey[100];
final textColor = isDarkMode ? Colors.white70 : Colors.grey[700];
final titleColor = isDarkMode ? Colors.white : Colors.black;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: Open source project showcase images have white background in dark mode Bug: Open source project showcase images broken on dark mode

2 participants