Implement Dark Mode for Validator GUI

[kenny-io]

We want to add a dark mode option to the validator GUI to improve user experience and accessibility. This task will involve creating dark mode assets, implementing the necessary CSS, and adding a toggle switch to allow users to switch between light and dark modes.

Possible Tasks

1. Create dark mode versions of existing assets (icons, logos, etc.)
2. Implement CSS variables for color schemes (light and dark)
3. Add a dark mode toggle switch component
4. Implement logic to switch between light and dark modes
5. Ensure all components and pages support both modes
6. Add persistence for user's mode preference

Guidelines

• Use Tailwind CSS classes and CSS variables where possible for consistency
• Ensure good contrast ratios for accessibility in both modes
• Test the implementation on different screen sizes

Resources

• Tailwind CSS Dark Mode
• Next.js Context Providers
• CSS Variables

Definition of Done

• Dark mode toggle switch is functional and visually appealing
• All pages and components support both light and dark modes
• User's theme preference persists across sessions
• Code is clean, well-documented, and follows project conventions
• Pull request includes before/after screenshots demonstrating the implementation

Mentorship

If you need any help or have questions about this issue, feel free to ask in the comments. You can also start a discussion here on GitHub, and our team will be happy to provide the necessary assistance.

[Mide001]

Hi @kenny-io can you assign this to me?

[kenny-io]

Hi @kenny-io can you assign this to me?

sure, go for it!

[kenny-io]

Hey @Mide001 how's it going? Have you made any progress or need help with anything? let us know in the comments

[kenny-io]

Hi @Mide001 we haven't heard from you in 3 weeks, as such we'll now open up this issue again for other contributors to take up. Looking forward to your contributions in the future