TheShiveshNetwork/readmekraft

[enhancement]: Add Dark Mode

Closed this issue · 5 comments

SwanandD121 commented

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

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

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

SwanandD121 commented

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

Yes, I'll be using next-themes

  • 👍1
SwanandD121 commented

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

TheShiveshNetwork commented

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

TheShiveshNetwork commented

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

  • 👍1