adding dark mode toggle feature

[bitbroke]

many users prefer dark mode everywhere , this feature will enhance user experience .

[bitbroke]

please assign this project to me under hacktoberfest2024

[vaibhavyadav-dev]

@bitbroke share your plan on how you will approach this task. Tell me where do want to add this feature and how this will be impacted.

[bitbroke]

okay so my plan is to :

• I will place a simple toggle button inside the to allow users to switch between light and dark modes.
• Instead of using an external CSS file, I’ll apply inline styles directly within the HTML or through JavaScript. This will allow us to dynamically change the styles when toggling between modes.
• I’ll write JavaScript code that checks the current mode (light or dark) and switches the inline styles accordingly.

• the impact you can expect is :

• The toggle button will allow users to switch between light and dark themes on the fly.
• Since I'm not using external CSS, it will reduce dependency on additional files, but might result in a longer inline code block.
• By embedding styles directly within JavaScript, it becomes easy to manage and implement without external dependencies, keeping the code base lightweight.

Steps for that will be

• Add a Button: Insert a button in the HTML body.
• Define Light and Dark Styles: Set inline styles in JavaScript for both light and dark modes.
• Add Event Listener: The button will toggle between modes by switching the styles dynamically.

• i bilieve that this will create a flexible and user-friendly theme-switching experience without external CSS.

[vaibhavyadav-dev]

@bitbroke website is already in dark mode (we've used dark gray or black color), your suggestion doesn't look unique. It'd be great if you can suggest some new feature to add, like some beautiful UI's.