Feat: A toggle button for dark mode

[Sanchitbajaj02]

What feature?

Currently the web application has the capability to change the color of elements like background, text, buttons, etc but there is no toggle button which a user can use. To change the theme of the website, user has to change the theme of their device.

Add screenshots

No response

Record

• [X] I agree to follow this project's Code of Conduct
• [ ] I want to work on this issue

[github-actions[bot]]

Congratulations, @Sanchitbajaj02! 🎉 Thank you for creating the issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

'We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our Contributing Guidelines'

[irfanfaraaz]

@Sanchitbajaj02 Can i work on this?

[Sanchitbajaj02]

@irfanfaraaz yeah sure, assigned to you. Also please join the discord channel for any updates

[irfanfaraaz]

@Sanchitbajaj02 I implemented a toggle button. It's changing the theme in local storage, but it's not changing the theme of the app. Is there anything that I am missing?

[Sanchitbajaj02]

@Sanchitbajaj02 I implemented a toggle button. It's changing the theme in local storage, but it's not changing the theme of the app. Is there anything that I am missing?

How are you changing the state in the component itself. You created the system to change the state in localstorage, but are you parsing it in the application?

[irfanfaraaz]

I guess there's a conflict between the global styles and the styles applied by the theme provider.

When I commented out the below part from 'globals.css', it worked.

body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); }

[Sanchitbajaj02]

Can you confirm whether this css is applying anywhere or not? If not, then comment/remove it

[irfanfaraaz]

It is applying the background color

[Sanchitbajaj02]

Can you do something so that the background dependency will be removed from this?

you can refer this: https://www.linkedin.com/pulse/implement-dark-mode-tailwindcss-nextjs13-app-5-simple-lucas-los-arcos/

[irfanfaraaz]

This is looking fine I guess.

To remove that dependency we have to customize our tailwind config.

want me to make a pull request with this?

[Sanchitbajaj02]

Just do one thing, in dark mode, can you use the colors what were used previously as that will be our brand colors

[irfanfaraaz]

Can I refer your figma design?

[Sanchitbajaj02]

I don't have a proper figma design, but you can refer the color shades that I am using in this project.

[irfanfaraaz]

I experimented with various approaches to implement the background change through globals.css. While text and icon colors are behaving as anticipated, I'm encountering an issue with the background. The background of the dark theme seems to be overriding the light theme. Unfortunately, despite my efforts, I'm currently unable to debug this issue.

[Sanchitbajaj02]

You can make a pr of your work up until now. Then I can analyse where we can enhance that feature