[Feature]: DarkMode / Light Mode want to add

[tusharyadav11]

Is your feature request related to a problem? Please describe.

Want to add the dark mode functionality

Describe the solution you'd like

I would like to work on this functionality. in my earlier projects i have worked on this functionality. I would be grateful if you could assign me this functionality under Gssoc'24

Alternatives

No response

Additional Context

No response

Are you interested in contributing?

• I'd like to work on this issue

Code of Conduct

• I have used the search function to check if an issue already exists
• I agree to follow this project's Code of Conduct

[linear]

DIG-392 [Feature]: DarkMode / Light Mode want to add

[github-actions]

Hello @tusharyadav11! 🌟
Thanks a bunch for creating an issue. Your input is invaluable, and we're eager to collaborate with you to address the matter. Keep up the fantastic work!

Don't forget to hit the ⭐ star button 😉

Tip

Don't forget to check our Contributing Guidelines, PR Guidelines and Issue Guidelines for more details.

Website | Discord | Twitter | Instagram | Linkedin

[pranshugupta54]

Hey @tusharyadav11, how are you planning to implement this? We're using tailwind and daisyui - are you going to make config changes to them or some other way?

Did you setup locally?

(We'll assign this issue on the basis of best approach)

[tusharyadav11]

i am trying to implement it you Js,css and html @pranshugupta54

[pranshugupta54]

Doing it directly with html css js won't be good here.

[aasthakourav20]

Hey pranshugupta54 , Please assign this issue to me

[pranshugupta54]

Hey @aasthakourav20, please read the above comments.

(We'll assign this issue on the basis of best approach)

[karishmaaa101]

Hey @pranshugupta54 is the issue resolved?

[pranshugupta54]

@karishmaaa101, #824 (comment)

[yashmandi]

hi @pranshugupta54 , here's my approach on how will i implement the dark mode:

• i'll use the useState hook from react to manage weather the app is in dark mode , starting as a false, or based on saved data.
• i will use the loacalStorage to keep the dark mode setting even after reloading of the page
• toggling happens when the button will be clicked, will create a handleDarkMode functon
• the main
  style then changes depending on darkMode being true (bg-black) or false (bg-white)
• the toggle button switches between showing on and off based on darkMode, and clicking it will trigger the handleDarkMode
• lastly, the darkMOde state wil be sent to various pages, so that it can be accessed & updated as requiredd

[pranshugupta54]

@yashmandi, please check tailwind docs and daisyui docs. There is no need to change the classes from bg-black to bg-white on switch, that will require us to change almost everything.

[ArtiGaund]

Using tailwind CSS, we can add darkMode selector to tailwind config file

  darkMode: 'selector',
  // ...
}``` and use as dark in className to perform what action to be performed when site is in dark mode. 
In DaisyUI, we use
daisyui: {
    themes: ["dark"]
  },

[pranshugupta54]

That sounds a better approach, we'd probably need to change some classes too.

[tusharyadav11]

@pranshugupta54 hey pranshu assign it to me dark mode functionality . recently only i have implemented dark mode functionality using darkowl without changing up the any classes

[pranshugupta54]

@tusharyadav11, describe the approach more. We don't want you to just get inverted colors

[tusharyadav11]

@tusharyadav11, describe the approach more. We don't want you to just get inverted colors

it is a type of script . we just have to insert it into the code and automatically created the toggle button for the switch of light mode to dark and vice versa

[pranshugupta54]

How will it work? You're not giving any approach at all. Just a button to flip makes no sense

[ArtiGaund]

Doing dark mode is not about only changing background color; the other components colors needs to be adjusted as well to make them visible according to its background. So we have to change the some classes as well.

[pranshugupta54]

Yeah, we gotta make classes like dark:bg-abc bg-xyz depending on theme

[ArtiGaund]

@pranshugupta54 as the whole site is already in dark mode, how you want site to look like in light mode?

[pranshugupta54]

We don't really have any plans/roadmap for it, you'll have to work on the design too under the issue.

[ArtiGaund]

OK no problem

[ArtiGaund]

whats the timelimit for the assignment?

[pranshugupta54]

This is a not a priority so you can take 7-10 days

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[ArtiGaund]

I am working on it

[ArtiGaund]

@pranshugupta54 home page have grid for dark mode, but for light mode the grid will not look good.

[ArtiGaund]

@pranshugupta54 can you tell me from where this grid background is coming?