Enhancement: Implement Dark Mode in UI

[babblebey]

The project currently uses Tailwind CSS, and the dark mode configuration is already set up. However, the implementation of dark mode in the UI is pending. We need to insert the "dark:" utility classnames in the respective places throughout the project's UI components to enable dark mode. Additionally, a dark mode toggle should be implemented to allow users to switch between light, dark and system modes.

Scope of Work:

1. Insert "dark:" utility classnames in the project's UI components to enable dark mode.
2. Implement a dark mode toggle that allows users to switch between light and dark modes.

Resources:

• Dark Mode in Astro
• Tailwind CSS Dark Mode Documentation

Additional Information:

• Dark mode is becoming a popular feature in web applications as it reduces eye strain and improves readability, especially in low-light environments.
• The project's dark mode should reflect the branding and design language of the existing UI in light mode.

Submission Guidelines:

• Developers working on this task should ensure that the dark mode implementation is consistent with the project's design and branding (hopefully we have one before you're seeing this, checkout Feature(Design): Request for Logo Design and Branding #13).
• Any deviations from the existing design language should be discussed in comments below and approved by a maintainer 🙏.