BioDrop icon indicating copy to clipboard operation
BioDrop copied to clipboard

[FEATURE] Light/Dark Mode

Open vish-han opened this issue 3 years ago • 19 comments
trafficstars

Description

Hey Everyone👋! I think there should be a switch to toggle between light And dark mode.

I'm willing to work in this issue if the maintainers are happy to assign me😀.

Screenshots

No response

Additional information

No response

vish-han avatar Jan 25 '22 07:01 vish-han

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

github-actions[bot] avatar Jan 25 '22 07:01 github-actions[bot]

Do you think something like on my website will work for this or do you want another kinda of design like a moon or something?

https://mogulchristmas.kendalldoescoding.gq/

There's a toggle between dark and light mode in the top right of the website.

KendallDoesCoding avatar Feb 06 '22 14:02 KendallDoesCoding

Can I work on this feature.

VaibhavArora19 avatar Mar 15 '22 06:03 VaibhavArora19

Sure @VaibhavArora19

schmelto avatar Mar 15 '22 07:03 schmelto

Hey I am a beginner with react so I wanted to ask that I can do this by manipulating DOM with javascript right.. like adding or removing css classes based on value that can be changed using useState or is there any other approach I should use?

VaibhavArora19 avatar Mar 16 '22 15:03 VaibhavArora19

@schmelto

VaibhavArora19 avatar Mar 17 '22 08:03 VaibhavArora19

@schmelto

I would suggest try to look for a standard approach for Prime react which we are using in this project. I found something like this not sure if it works https://stackoverflow.com/questions/68327342/how-can-one-have-a-theme-switcher-in-primereact Maybe someone else can give some guidance.

schmelto avatar Mar 17 '22 09:03 schmelto

Okay... I'll try this.

VaibhavArora19 avatar Mar 17 '22 10:03 VaibhavArora19

Hey!! Can you assign this issue to someone else I tried this method but did not get the specified result. I think someone with more experience in React should work on this issue as it requires theme changing in runtime.

VaibhavArora19 avatar Mar 24 '22 04:03 VaibhavArora19

@VaibhavArora19 no worries feel free to check out one of our other issues if you want :)

schmelto avatar Mar 24 '22 08:03 schmelto

Hey @schmelto i would like to know if this issue is still open.?

Dhruv-Gajjar avatar Apr 09 '22 06:04 Dhruv-Gajjar

Sure go for it @Dhruv-Gajjar

schmelto avatar Apr 09 '22 06:04 schmelto

@schmelto i am really new to open source can you guide me a bit about in which file do i have to add this feature? It would be of great help.

Dhruv-Gajjar avatar Apr 09 '22 06:04 Dhruv-Gajjar

@schmelto

I would suggest try to look for a standard approach for Prime react which we are using in this project. I found something like this not sure if it works https://stackoverflow.com/questions/68327342/how-can-one-have-a-theme-switcher-in-primereact Maybe someone else can give some guidance.

@Dhruv-Gajjar maybe this helps also nur completely sure where and how to implement this

schmelto avatar Apr 11 '22 05:04 schmelto

Hey!.@schmelto I have tried the method in the above article, But only the Prime React components theme is changing, the rest dose not seems to apply the theme, i tried but cant make it work, I am still a beginner i think someone with good React experience can make this work..

Dhruv-Gajjar avatar Apr 12 '22 07:04 Dhruv-Gajjar

Hey! @schmelto I want to try this issue.So, can I work on this issue?

Shivam-Katare avatar Apr 28 '22 04:04 Shivam-Katare

Hey @schmelto I would like to work on this issue.

cperezcapote avatar Jul 09 '22 04:07 cperezcapote

can I also work on this issue ? would love to contribute in this issue

Aniket1026 avatar Jul 16 '22 22:07 Aniket1026

Hi @schmelto, I just tried implementing the toggle button for Dark and Light mode and it works well, also passes all the test cases. So if the maintainers allow i can make a pull request for the same.

Button is placed next to the version indicator.

ScreenShots of the Implementation:

Screenshot 2022-08-20 at 1 37 04 PM Screenshot 2022-08-20 at 1 37 17 PM Screenshot 2022-08-20 at 1 38 01 PM Screenshot 2022-08-20 at 1 40 56 PM

Vedant-Manjrekar avatar Aug 20 '22 08:08 Vedant-Manjrekar