Sameera-Perera/Flutter-TDD-Clean-Architecture-E-Commerce-App

Implement Dark Theme

Sameera-Perera opened this issue · 6 comments

Sameera-Perera commented

Objective
Add support for a dark theme in the Flutter e-commerce app to enhance user experience and provide a visually appealing alternative.

Overview
We want to introduce a dark theme option in our Flutter e-commerce app to cater to users who prefer a darker interface. This enhancement will involve modifying the app's UI components, ensuring proper color schemes, and providing a seamless transition between light and dark themes.

Implementation Details
Theme Configuration: Update the app's theme configuration to include a dark theme variant.
Color Scheme: Adjust the color scheme for optimal visibility and aesthetics in dark mode.
Toggle Functionality: Implement a user-friendly toggle switch or button to enable/disable the dark theme.
Testing: Thoroughly test the dark theme across different screens and devices to ensure a consistent and bug-free experience.
Contribution Guidelines

If you're interested in contributing to this enhancement, please follow these guidelines:

  • Fork the repository.
  • Create a new branch for your changes.
  • Implement the dark theme feature.
  • Test thoroughly on various devices and screen sizes.
  • Submit a pull request to the develop branch.

Additional Notes

  • Feel free to discuss any design decisions or challenges in the comments section.
  • Collaborate with other contributors to ensure a cohesive implementation.
  • Your feedback and suggestions are highly valued!
    Let's work together to make our Flutter e-commerce app even better! 🚀
deep1409 commented

Hey @Sameera-Perera ,
I have forked this repository and I just want to discuss regarding the theme colors.
Can I change the theme or do you want the theme which is currently in it?

Furthermore, Material3 have their own website to build theme and preview.
Material 3 Theme Builder : - https://m3.material.io/theme-builder#/custom

Sameera-Perera commented

Thanks for sharing this @deep1409.
Currently application only have light theme, I like to implement dart theme alongside with light theme and give settings options to user to choose theme mode as they want.

deep1409 commented

Hey, @Sameera-Perera
I have implemented the Dark Theme feature which you can watch in below video.
I am eagerly waiting for your reply.

Dark.Theme.mp4
Sameera-Perera commented

It great for starting, but look like we need change more text colours and other theme according to dark theme. So after you done development make pull request to #feature/dark-theme branch. Thank you!

deep1409 commented

Hii @Sameera-Perera,
Could you provide baseColor and highlightColor for Shimmer(for Dark Mode). Actually, I tried couple of colors but it is not looking nice.

Sameera-Perera commented 
baseColor: const Color(0xFF3a3a3a),
highlightColor: const Color(0xff5b5b5b),

Try this, We can review all theme colors later.