Support Dark theme based on the web browser's theme

[krishnaacharyaa]

Now the project doesn't switch to dark theme when the browser's theme is set to dark, we have to make it compatible for dark theme.
To better test this, use edge browser and switch the theme between light and dark.

[SankalpHaritash21]

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

[krishnaacharyaa]

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.

[SankalpHaritash21]

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

[SankalpHaritash21]

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

[krishnaacharyaa]

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

[SankalpHaritash21]

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

[SankalpHaritash21]

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

[krishnaacharyaa]

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

[SankalpHaritash21]

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

[krishnaacharyaa]

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

[krishnaacharyaa]

@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

[SankalpHaritash21]

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

[krishnaacharyaa]

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.

[SankalpHaritash21]

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

[SankalpHaritash21]

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

[krishnaacharyaa]

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

[krishnaacharyaa]

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

[SankalpHaritash21]

@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.