Introduce a New “Bright Theme” to Enhance Visual Accessibility and User Personalization

[Anaghanpatil]

Description: Overview: Resonate currently offers multiple themes designed around subtle and dual-tone palettes. While these align with the app’s minimalist design philosophy, introducing a new “Bright Theme” can enhance visual accessibility and cater to users who prefer more vibrant and high-contrast interfaces.

Objective: Design and implement a new theme variant featuring a balanced, lively color palette that complements the existing themes while maintaining consistency with Resonate’s overall design system.

Proposed Enhancements:

Add a new theme configuration named BrightTheme in the app’s theme system. Define refreshed accent colors for core interactive elements: • Join Button: Vibrant green shade to signify action. • Share Icon: Clean blue tone to indicate connectivity. • Participant Count Icon/Text: Soft complementary tone for clarity and contrast.

Ensure color choices meet accessibility contrast ratios and integrate seamlessly across screens. Update theme definitions in theme_list.dart and related files as needed. Expected Impact:

Expands theme customization options for users. Improves accessibility and visual appeal without disrupting the existing dual-tone themes. Provides a modern, inclusive aesthetic that aligns with Resonate’s design goals.

[github-actions[bot]]

👋 Hello @Anaghanpatil!
Thank you for opening this issue. Our team will review it soon. 🚀

• If you can, please provide more details like steps to reproduce, expected vs. actual behavior, and screenshots (if applicable). 📌

We appreciate your contribution! 💡

[Anaghanpatil]

1. Steps to Reproduce

2. Open the Resonate app (latest version).

3. Navigate to the Home / Live Rooms section.

4. Observe the Join button, Share icon, and Participants count area.

5. Actual Behavior

• The section looks plain with minimal color differentiation.
• All elements (Join, Share, Participants) use similar tones, which reduces visual clarity and user engagement.

3. Expected Behavior

• Apply a more vibrant and accessible color scheme for better contrast and modern look:
  • Join button: Bright green (#4CAF50) for positive action emphasis.
  • Share icon: Distinct blue (#2196F3) to indicate external sharing.
  • Participants count text/icon: Subtle contrasting color (e.g., light orange or theme-adaptive accent).

4. Suggested Fix This can be updated in the CustomLiveRoomTile widget (inside custom_live_room_tile.dart) by modifying the color properties for:

• The ElevatedButton (Join button background color).
• The IconButton for Share.
• The Text color for participant count.

Screenshot

[sandy4242]

@M4dhav umm hi, if this issue is reviewed, could i be taking a good first step on solving this issue??

[M4dhav]

Hey @Anaghanpatil , These are the colors present in one theme of the App, but there are multiple themes crafted for a wider audience. Changing the colors in this theme which is meant to be mostly a dual tone theme, would go against the design philosophy of this theme. Instead, if you have an idea for an entirely new theme, you can go ahead and add that to Resonate.

If you do not want to work on this youself, please inform us so that @sandy4242 can be assigned instead

[Anaghanpatil]

@M4dhav Thank you for the clarification! I understand that changing the colors in the existing theme could affect the design philosophy. I’ll start working on a new theme for Resonate as suggested. I may take around a week to complete it and ensure it looks consistent, user-friendly, and well-tested. “Please assign this issue to me.”

[M4dhav]

Please edit issue title and description accordingly

[Anaghanpatil]

@M4dhav, I’ve updated the issue title and description as suggested to reflect the new theme proposal. I’ll begin planning the implementation and share updates within a week. Thank you for assigning this to me!

[Codersintu]

Hi! I’m new to open source and interested in contributing. I’d love to work on this issue and learn through the process. Could you please assign it to me if it’s available?

[M4dhav]

Hey @Codersintu , welcome to the repo. I think another contributor is already working on this, but you can go through the repo, and find any other issues you might want to contribute to

[Anaghanpatil]

Thanks, @M4dhav! Yes, I’m currently working on this issue. I’ll update soon with my progress. 😊

[anmolkhurana5205]

Hey @M4dhav,

I’ve gone through the entire discussion and noticed that the task assigned to @Anaghanpatil hasn’t progressed for over a month, even though the estimated completion time was mentioned as one week.

Since this feature is important for improving theme accessibility and user customization, I’d be happy to take over the task and implement the new BrightTheme as described.

Proposed Implementation Plan

1. Create a new theme configuration named BrightTheme inside theme_list.dart.
2. Define new accent colors:

• Join Button → Color(0xFF4CAF50)
• Share Icon → Color(0xFF2196F3)
• Participant Count → Soft complementary tone

3. Update components:

• ElevatedButton colors inside custom_live_room_tile.dart
• IconButton theme for share icon
• TextStyle for participants count

4. Ensure WCAG AA contrast ratio is maintained.

[M4dhav]

@Anaghanpatil are you still working on this

[Anaghanpatil]

Hi @M4dhav and @Codersintu,

I wanted to give an update — I’m still actively working on this issue.

I already have the theme implementation code prepared, but I’ve been blocked because the app hasn’t been running on my local machine due to outdated dependencies and version conflicts. I’ve been trying to fix the build issues so I can properly test the new BrightTheme before submitting a PR.

Once the app runs successfully, I’ll integrate and verify the theme immediately.

Thank you for your patience — I’ll update again soon.