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 🙏.

[AyendiSimeon1]

Hi Babblebey, i would like to fix this issue.
Give me a go ahead so i can start working on it.
If you also have any other guide let me know

[babblebey]

Hi @AyendiSimeon1, thanks for your interest in this issue.... but we are ready for this implementation just yet... and this is because of it relation to the referenced issue as stated on the issue description from the Submission Guidelines section, quoted below...

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).

The issue #13 is where we are able to get a design guide on how to theme the dark mode UI, so until we are done on that end, we cannot work on this for now.

I will make sure to ask you first when this is ready to work on, we'd appreciate it you look at more open issues that you can work on 😉