Feature | Dark / Light mode

[aadeshkulkarni]

Setup Dark & Light mode for the app where light mode = currrent setup.

The Color, typography, spacing, roundedness, etc. should be easily configurable from 1 config file. Build using tailwind CSS.

Ensure that you're implementing modes in the most optimised, efficient manner.

DO NOT BREAK EXISTING FEATURES

[vverma022]

I'd like to work on this feature. As the project is in tailwind I would try implementing it using the selector strategy.

[aadeshkulkarni]

Sure. only 1 issue can be assigned to a contributor at a time.

If no one claims the issue before you complete #146, will assign it to you.

[vverma022]

Sure. only 1 issue can be assigned to a contributor at a time.

If no one claims the issue before you complete #146, will assign it to you.

Can you assign it

[aadeshkulkarni]

Sure

[aadeshkulkarni]

@vverma022 - Please set the primary, secondary colors for both light and dark mode in tailwind.config.js And then use bg-primary / bg-secondary in the code.

This would be a much cleaner approach and will be easier to maintain in future

[Shashan17J]

@aadeshkulkarni Assign this to me.

[aadeshkulkarni]

Share your approach first.

[Shashan17J]

1.Enable the 'darkMode' feature in the 'tailwind.config.js' file.

2. Create a component that toggles dark mode and save preference in localStorage.
3. Modify the logout function to preserve the dark mode preference.
4. And then style the UI Ex. dark:bg-white.

[aadeshkulkarni]

We are planning to integrate Shadcn soon. Can you implement dark modes using Shadcn ?

[vverma022]

We are planning to integrate Shadcn soon. Can you implement dark modes using Shadcn ? I'll do it I have the code base already.

[vverma022]

If shadcn needs to be implemented then the implication will be easy as well as structuring the app-bar component. I'll make a new brach to solve this issue as the current one has its issues.

[Shashan17J]

I have already implemented dark mode; only a few things remain. @aadeshkulkarni

[Shashan17J]

@aadeshkulkarni if this is OK, then I can create a pull request for this issue.

[aadeshkulkarni]

@Shashan17J - Is this done using shadcn ?

[Shashan17J]

@aadeshkulkarni without shadcn.

[aadeshkulkarni]

In that case, pause. @vverma022 - Can you build it using shadcn ? If yes, please share timelines.

[vverma022]

In that case, pause. @vverma022 - Can you build it using shadcn ? If yes, please share timelines.

Probably yes, Shadcn already provides dark theme as well as the toggle component. I'll try and get it done by tomorrow. Any preferences or suggestions ?

[aadeshkulkarni]

In that case, pause. @vverma022 - Can you build it using shadcn ? If yes, please share timelines.

Probably yes, Shadcn already provides dark theme as well as the toggle component. I'll try and get it done by tomorrow. Any preferences or suggestions ?

Yes.

• Use default theme, instead of New york. So that we can make use of lucide-react icons in future.
• Try to ensure that all colors are configurable from one place (global.css or tailwind config)

Break the task down into steps.

Step 1: Try to setup shadcn first. And see everything works as is currently. (Light mode i mean) Step 2: Add dark mode incrementally. One page at a time. Start with simple pages like Sign up, Sign in. Make sure you commit your code on each step with the appropriate commit messages. Step 3: Once all pages are done. Check components.

Don't add any Shadcn components for now. (unless absolutely necessary). We will do it as a separate ticket.

Document everything that you achieved and also things that can be done later.

[vverma022]

As of now I have just added 2 components. A button and a dropdown which will act as the trigger's for the dark mode. So instead of using one of the default colour schemes implement it manually by changing and adding theme's in the index.css and tailwind files.

[vverma022]

As of now I have just added 2 components. A button and a dropdown which will act as the trigger's for the dark mode. So instead of using one of the default colour schemes implement it manually by changing and adding theme's in the index.css and tailwind files.

[vverma022]

Revising the date of completion I might take a bit more than a day. But it'll be done before this week