[Feat] : Add Dark Theme Support for Enhanced User Experience

[AkashJana18]

Description:
The current Dub.co interface offers a light theme, which may not be comfortable for users in low-light environments. Adding a dark theme option would improve usability, reduce eye strain, and align the app with modern UI trends. A toggle option allowing users to switch between light and dark themes would greatly enhance accessibility and overall user experience.

Suggested Implementation Steps:

1. UI/UX Design:

   • Design dark theme color palettes, ensuring readability and contrast ratios are met.
   • Maintain visual consistency across the interface.

2. Theme Toggle Functionality:

   • Implement a toggle button, ideally placed in the settings menu or toolbar.
   • Ensure the user's theme preference is saved locally (e.g., in local storage).

3. Tailwind CSS Adjustments:

   • Modify CSS to support dark theme styles, including background, text, button, and icon colors.
   • Use variables for colors to streamline theme transitions and manage adjustments efficiently.

4. Testing:

   • Test across different devices and screen sizes to ensure theme consistency.
   • Conduct accessibility checks to ensure sufficient color contrast.

Expected Benefits:

• Enhanced Usability: Reduces eye strain, especially in low-light environments.
• Accessibility: Provides options for users with visual sensitivities.
• Modern Appeal: Keeps the app visually aligned with current UI/UX standards.

Priority: Medium

Potential Challenges:

• Ensuring all components and plugins support the dark theme without breaking UI elements.

[linear]

ENG-903 [Feat] : Add Dark Theme Support for Enhanced User Experience

[AkashJana18]

/assign

[oss-gg]

This issue is not part of oss.gg hackathon. Please pick a different one or start with a side quest

[AkashJana18]

Can this be added to oss.gg and assigned to me?
I am looking forward to working on this issue.
Thank You.

[steven-tey]

We don't have any plans to add dark mode for now, but I appreciate the suggestion!

[legallyiris]

hey! any chance that this could be revisited? i know that in other issues you said it "wasn't a requirement for your target audience", but on top of being "really cool", dark mode is pretty important for accessibility (e.g., people with photosensitivity, migraines, even colour blindness). i understand the potential impact on dev time but at the same time, excluding the aforementioned groups of people is... i dunno, it doesn't seem right.

[steven-tey]

Really appreciate the feedback here @legallyiris! What you said makes sense – I've just reopened this ticket and will get dark mode prioritized soon!