Enhancement: Implement Dark Mode in UI

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](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/)
- [Tailwind CSS Dark Mode Documentation](https://tailwindcss.com/docs/dark-mode)

**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 #13).
- Any deviations from the existing design language should be discussed in comments below and approved by a maintainer 🙏.

Start by reviewing the existing Tailwind dark mode configuration and the UI components, then consult the linked Dark Mode in Astro and Tailwind CSS documentation. Done means the UI has consistent dark-mode classes and a toggle supporting light, dark, and system modes while preserving the existing branding; check #13 for the design direction.

Written by the indexing model from the issue text.