Support Dark theme based on the web browser's theme about wanderlust HOT 18 CLOSED

Oh is it ? Let me do a research and get back to you, if we cannot do it in the tailwind-css level,
We'll do it in one of the best proposed approaches by you.
No @SankalpHaritash21, this issue is for automatic switching based on the browser theme.
I'll get back to you, after some research

from wanderlust.

ok sir . I will try my best. Till then I will also try figma

from wanderlust.

@krishnaacharyaa
can you assign this issue to me?
I will use Context Api to toggle between Dark and light mode

from wanderlust.

Are you planning to use switch ? to toggle between dark and light ? If yes don't , we'll have it as another issue. And if you are using context api, kindly research on the best practice as to where the file should be placed in the existing file structure.

from wanderlust.

Sir in src I will make a folder context.
There I will make a file Theme.tsx.
Sir can u suggest should I us drop down list which contain light dark and system for modes or I should use toggle or I should use button.
Plz suggest

from wanderlust.

Sir we need to update header which contain that component.
Sir If u have any approach plz suggest

from wanderlust.

Please carefully read the instruction(issue description) and the following reply, this story is not for having switch using toggle, this story is to support default dark theme based on the browser theme

from wanderlust.

sir we can use window.matchMedia it will detect browser theme it light or dark

from wanderlust.

sir I checked using mediaQuery we can change to dark mode. Based on system them because system and browser have same them.
Should I implement it

from wanderlust.

Thank you for your inputs and research @SankalpHaritash21, But can we try to do this in tailwind level ?
https://stackoverflow.com/questions/72649576/how-to-force-dark-mode-using-tailwindcss-on-browsers/72698408#72698408, kindly refer this and take a look at it.
So that we can reduce creating file and using the above said approaches

from wanderlust.

Sir I go through this approach but this approach is used to manual switching.
This approach is given in Tailwind documentation I have read it properly.
Sir plz let me know which approach we need manual or automatic switching

from wanderlust.

@SankalpHaritash21, we just have to add dark: prefix
Refer this for more https://tailwindcss.com/docs/dark-mode
And just FYI I have tested in my machine and it perfectly works

from wanderlust.

ok sir I will do. Plz update figma dark mode design.

from wanderlust.

It might take me some time to update the figma file, I feel you can manage even without figma design, it should not take much efforts, some background changes at the top level should do is what i feel, and some button design, other than that it should be mostly simple, you can try and come up with a solution, if it requires major changes, i'll create figma design.

from wanderlust.

sir I am facing merge conflict error. and sir I by mistake removed 2 branch while correcting it. plz help

from wanderlust.

I didn't get it, by mistake removed 2 branch meaning ?

from wanderlust.

Try to resolve the merge conflict, you will face because of the latest changes, when rebasing

from wanderlust.

@krishnaacharyaa sir I am facing a issue that when we use declaring color as a variable in this if we don't use dark keword before them then the by default first color applyed is implemented and not able to add opacity also.
Should I Change this approach or stay with it.

from wanderlust.