[enhancement]: Add Dark Mode

SwanandD121 commented 1 month ago

Description

The website currently only supports a light theme. Adding a dark theme will enhance the user experience, especially for those browsing the site in low-light conditions or who prefer dark mode for accessibility or aesthetic reasons.

Requirements

Add a toggle (e.g., switch or button) for users to switch between light and dark modes.
Store the user's theme preference (e.g., in local storage) so that it persists across sessions.
Ensure that the design elements (buttons, text, backgrounds, etc.) are optimized for visibility and contrast in both light and dark themes.
Maintain a consistent look and feel between both themes.

Acceptance Criteria

[x] A dark theme toggle is visible and functional on all pages.
[x] The light blue gradient is preserved in dark mode.
[x] The dark theme uses a color palette that minimizes eye strain.
[x] All components (text, buttons, links, icons) are easily readable and accessible in dark mode.
[x] User's theme preference is saved and applied on subsequent visits.
[x] No visual bugs or layout issues appear when switching between themes.

TheShiveshNetwork commented 1 month ago

@SwanandD121 you can work on it. Also you'll be using next-themes right?

SwanandD121 commented 1 month ago

@SwanandD121 you can work on it. Also you'll be using next-themes right?

Yes, I'll be using next-themes

SwanandD121 commented 1 month ago

Hey @TheShiveshNetwork, I am done with most of the work, can you please share your discord so we can discuss further?

TheShiveshNetwork commented 1 month ago

Hey, @SwanandD121 can you create a PR so that I can review the changes? What specifically about the discussion?

TheShiveshNetwork commented 1 month ago

Hey @TheShiveshNetwork, I am done with most of the work, can you please share your discord so we can discuss further?

I have just created a discord server for discussing about the project, you can join: Join Server

TheShiveshNetwork / readmekraft