Added the Dark/light mode functionality

[ChaithanyaKrishna28]

Issue Title:

resolve issue: #45

Type of change ☑️

What sort of change have you made:
New feature: This pull request introduces the implementation of a dark mode and light mode feature to enhance user experience and accessibility. Users will now have the option to toggle between different visual modes according to their preference. This addition is a non-breaking change, meaning it does not disrupt existing functionality but instead adds new functionality to the application.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Code style update (formatting, local variables)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist: ☑️

• My code follows the guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly wherever it was hard to understand.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added things that prove my fix is effective or that my feature works.
• Any dependent changes have been merged and published in downstream modules.

How Has This Been Tested? ⚙️

Describe how have you verified the changes made.
I have deployed it in my local machine and on the web also.
I have used both light and dark mode settings to verify that the interface adapts seamlessly.
It work fine.
I have only used Tailwind css.
Here are some of the pictures

before feature:

After feature Light mode:

After feature Dark mode:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
draw-it-out	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 17, 2024 6:55am
draw-it-out-zbd1	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 17, 2024 6:55am

[0xabdulkhaliq]

Why are you creating another PR ? @ChaithanyaKrishna28.

You have an existing one right ? #111.

Seems like the old one have conflicts, so I'm closing that. We can verify this new one.

[ChaithanyaKrishna28]

Why are you creating another PR ? @ChaithanyaKrishna28.

You have an existing one right ? #111.

Seems like the old one have conflicts, so I'm closing that. We can verify this new one.

Sorry for making trouble making another pr.
I have resolved the conflicts.
Can you check on them for merging.
If you want any changes to be done,let me know them.

--thank you

[0xabdulkhaliq]

The Dark mode is still not applied for Canvas(Whiteboard) and stroke color.

In light mode, we have

• #b7babf for Canvas
• #000000 for brush color.
• #d3d5d8 for Background

We need the colors to be changed while toggling the theme, So we can have this pair of colors for Dark theme.

• #111111 for Canvas
• #ffffff for brush color.
• #d3d5d8 For Background

Additionally, please change the theme toggle button's bg during dark mode. We can't set the body background for the button also.

Notify me once you made these changes.

[ChaithanyaKrishna28]

The Dark mode is still not applied for Canvas(Whiteboard) and stroke color.

In light mode, we have

• #b7babf for Canvas
• #000000 for brush color.
• #d3d5d8 for Background

We need the colors to be changed while toggling the theme, So we can have this pair of colors for Dark theme.

• #111111 for Canvas
• #ffffff for brush color.
• #d3d5d8 For Background

Additionally, please change the theme toggle button's bg during dark mode. We can't set the body background for the button also.

Notify me once you made these changes.

Ok I will notify once it's completed

[ChaithanyaKrishna28]

@0xabdulkhalid Can you please give some more detailed information.
like any pictures for my reference so that i can cope up with what changes i need to make.

[0xabdulkhaliq]

@ChaithanyaKrishna28, I already gave you the references on my Request part.

You need to change the colors for dark mode, just make sure to follow them.

[ChaithanyaKrishna28]

some of my work is this

is this ok? or any changes needed.

[0xabdulkhaliq]

@ChaithanyaKrishna28, We need the colors to be changed while toggling the theme, So we can have this pair of colors for Dark theme.

• #111111 for Canvas (Drawing Board)
• #ffffff for brush color.
• #d3d5d8 For Background of body

You need to change the drawing board to darker color, and need to change the painting color to white and background of body to be a lightened black not pure black.

I gave you the color codes, make sure to apply them properly.

[ChaithanyaKrishna28]

@0xabdulkhalid
Are you saying to change the color of the board and brush based on the theme (dark and light)?
my suggestion:

1. in the project we ourselves pick the background so it can be default any one(only one).

issues
if we change the board background and brush based on the theme the user will loose the drawing he made and
another important point is user interactiveness will be less.

[0xabdulkhaliq]

@ChaithanyaKrishna28, what you're saying is absolutely right. But you can try to change those things only if the user haven't drawn anything on the board(canvas).

If the user drawn any things on board then you don't need to change the board and brush color.

[0xabdulkhaliq]

LGTM 👍🏻

Ready to be merged 🚀

[ChaithanyaKrishna28]

Now can you merge the pull request.

[ChaithanyaKrishna28]

LGTM 👍🏻

Ready to be merged 🚀

@0xabdulkhalid @singodiyashubham87 are good to go for merge !!!

[singodiyashubham87]

@ChaithanyaKrishna28 Well Done, Keep Contriubting : )

[ChaithanyaKrishna28]

@ChaithanyaKrishna28 Well Done, Keep Contriubting : )

Thank you so much! I appreciate your encouragement and will definitely keep contributing. Your support means a lot!