🚀 [Feature Request] - Implementing Dark Mode
Closed this issue · 62 comments
Is your feature request related to a problem ? Please describe. ✍️
i want to implement dark mode using tailwind css and next themes to the web app under Hacktoberfest.
Describe briefly how you would implement this enhancement.
Some steps to implement this enhancement-
1. Step 1
2. Step 2
3. Step 3Additional context or screenshots
Additional context
Are you contributing for a program?
Other
Code of Conduct
- I have read and agree to the Contributing Guidelines of this project.
Hello @rishuraj1!
Thank you for raising this issue.
Please make sure to follow our Contributing Guidelines.
Don't forget to ⭐ our Grabtern-Frontend.
Our review team will carefully assess the issue and reach out to you soon!
We appreciate your patience!
@rishuraj1, will do this as well.Plzz label this as hacktoberfest and assign me
@inbuilt-aura please there can be more issues or. feat just try to see nd run project on localhost
@anmode no worries broo, let him fix the issue.I will work on different one and wait to see if there are any other issue.
@anmode I tried this and for some reason Idk my solution won't work(using next-themes), So, @inbuilt-aura can try if you want.
Meanwhile I will look for other issues, or @anmode can suggest me some. Thanks.
@rishuraj1, i will look into it.No issue @anmode ??
ok @inbuilt-aura you can took over and @rishuraj1 ok I'll create more issues today for sure!
@anmode can you tell me the command to run , none of the command is working.
None command? Please first make sure your code should be updated with upstream.
then install all packages npm i and then just run server in dev mode which is npm run dev
@inbuilt-aura what's the update on this issue?
@vatsalsinghkv I was working and almost completed this issue but my laptop got damaged and I had to order new one.
@vatsalsinghkv you can work if you are working fof hacktoberfest cuz I won't be available till 1 week
@inbuilt-aura would it really be ok? if implement the darkmode? colours in mind? for dark mode?
@vatsalsinghkv yes you can just keep in mind that colours should not look bad as we are using tailwind Css so it won't be an issue if you know how to do it.
@vatsalsinghkv @inbuilt-aura No worries hacktoberfest if end today... we have our swagkit wining window open.. Just complete 10PRs
@anmode, what do you mean by swagkit winning window?
@vatsalsinghkv yes, i am back now so i will try to submit pr today,hopefully
@inbuilt-aura, I've built the dark theme colour scheme, but I haven't used next-theme so if you want we can work together like you can migrate my darkmode theme to next-themes
I've come up with these colour schemes for the darkmode, not sure which one should I go with:
@anmode check these dark themes for the website
@vatsalsinghkv yeah seems what you have used like normal tailwind or what.Also i see that toggle isn't changing when clicking on day or night mode.
@vatsalsinghkv, can you share me the updated code?
@inbuilt-aura how should I share the code with u? yea actually I was just testing the dark colour theme without toggling with darkmode button that's why it's like this for now,
@vatsalsinghkv do one thing, create a new folder and push your code there on your own GitHub and share that link here.Once I will clone the code,you can delete the repo.
@anmode, what do you mean by swagkit winning window?
we have ongoing competition in grabtern, first 5 those who complete 10 PRs. ( techinal one) will get a swag kit from grabtern. as we are a startup!
@inbuilt-aura, I've built the dark theme colour scheme, but I haven't used next-theme so if you want we can work together like you can migrate my darkmode theme to next-themes
I've come up with these colour schemes for the darkmode, not sure which one should I go with:
@anmode check these dark themes for the website
it look amazing! LIKED IT.. I like 2nd one.
@vatsalsinghkv yeah seems what you have used like normal tailwind or what.Also i see that toggle isn't changing when clicking on day or night mode.
+1
Hey @inbuilt-aura, can we do something like this, I've implemented the dark-mode using context api and custom hook use-theme, you can migrate this code using custom hook to next-themes?
@vatsalsinghkv if thats okay with @anmode, then sure.
@anmode plzz share your thoughts so that we can implement and close this issue quick.
yeah! using custom hook looks good to me!. You both can go forward with this
@anmode please accept pr so that i can clone it again and change things which are needed to
@anmode please accept pr so that i can clone it again and change things which are needed to
if you want to make any changes you can pull the PR! see the command line instructions below the PR. Ok if you want me to merge that.. some minor changes are needed ok no worries I'll merge it.. just one thing that default is light theme
@anmode @vatsalsinghkv before giving the updates, @vatsalsinghkv i am not able to see any code which you have changed, i don't know what pr have u pushed. Can you tell how did you changed the colour as i am not able to see any difference in the code or have u reset and pushed the code like that.
Now for the updates, i have created the toggle theme and you can now change the code from light to dark, one thing is left that is to write tailwind css code for dark: colour to toggle into light and dark components.So tell the next step or for now should i push.
@anmode @vatsalsinghkv before giving the updates, @vatsalsinghkv i am not able to see any code which you have changed, i don't know what pr have u pushed. Can you tell how did you changed the colour as i am not able to see any difference in the code or have u reset and pushed the code like that.
The PR is under Review only a last thing to commit left after which it will good to merge and you can see on local too, and for the toggle that you show I personally like the previous toggle! please check this pR:#804 @vatsalsinghkv did change but dashboard left to get checked and to be fixed in dark mode
@anmode thats bcz its not visible as i have not implemented the colors or background anything.I thought you have merged that pr, no issue.Just let me know when you have merged the pr so that i can complete rest of them and close this issue.Just comment here that pr is merged when done.
ok @inbuilt-aura so pR is merged now!
@anmode thanks
@vatsalsinghkv / @inbuilt-aura anyone working on improving dark mode??
@anmode yeah but there are some issues. I even checked commits and pr to confirm but i dont see any changes related to dark mode images which @vatsalsinghkv shown to us.Can you confirm that cuz neither i am seeing any code written in any file related to that just the dark mode related functionality which i had already done that and shared the image so how did he made the dark mode colour change?
@anmode bcz for that i have to re-write whole tailwind css styling code for each components to implement that.
@anmode Hey bro can you tell me which component is responsible for pre-loader?
@inbuilt-aura hey bro, which images are you talking about
@vatsalsinghkv the images which you have shared in dark mode
@inbuilt-aura the one in the footer and login page? I've inverted them in the dark mode as they were black and white
@vatsalsinghkv do one thing, i have completed the toggle and everything. I will even do the navbar, just apply dark colour to other component one by one which @anmode will like and we can complete this issue.Will that be okay @anmode
@vatsalsinghkv i can see for whole website
@vatsalsinghkv have you done in footer? I cant see any changes there in code
@inbuilt-aura it is there: bf5c99b#diff-ea591b80d035e1a7d1e0279e8242846c6e2d68551787cb71d01119247043a475, did you pull the changes? and you can preview the dark-mode in the preview link, its not in the production link
@vatsalsinghkv Okk got it.Plzzz check above images which i provided i have done the toggle thing.let me see the rest
@inbuilt-aura , I merged the dark Mode pR, Please pull the latest changes in develop branch.
@vatsalsinghkv We have two preloader first is main preloader of website and other is dashboard one.
@vatsalsinghkv Okk got it.Plzzz check above images which i provided i have done the toggle thing.let me see the rest
I think toggle is look good, any improvement you did? as in your screenshot toggle did not have any CSS ?
@vatsalsinghkvl @anmode I am working on the styling
@anmode thanks got it, I think it'd be better if we can also create a separate component for pre-loader under component/homePage
@anmode Hey I finally got logged in I think you fixed it, so in the next PR I am gonna fix dashboard & preloaders with darkmode. I also think there should be a dark-mode toggle button in the dashboard most probably next to the notification button
@anmode Hey I finally got logged in I think you fixed it, so in the next PR I am gonna fix dashboard & preloaders with darkmode. I also think there should be a
dark-modetoggle button in the dashboard most probably next to the notification button
yeah it a great idea, waiting for the pRs!
@anmode thanks got it, I think it'd be better if we can also create a separate component for pre-loader under
component/homePage
yeah it also a great idea! if you find ok, can create a seperate pR for this
PS: Loader needs to be tested carefully!
Can i work on this?
yeah sure!
@anmode is this issue resolved?