-
Notifications
You must be signed in to change notification settings - Fork 1
Add Dark Mode Support 🌙 #1
Copy link
Copy link
Open
Labels
GSSoC '26enhancementNew feature or requestNew feature or requestfrontendTo help contributors filter issues related only to the React/UI part of the project.To help contributors filter issues related only to the React/UI part of the project.good first issueGood for newcomersGood for newcomersui-uxFor tasks involving CSS, Tailwind, or Framer Motion improvements.For tasks involving CSS, Tailwind, or Framer Motion improvements.
Description
Metadata
Metadata
Assignees
Labels
GSSoC '26enhancementNew feature or requestNew feature or requestfrontendTo help contributors filter issues related only to the React/UI part of the project.To help contributors filter issues related only to the React/UI part of the project.good first issueGood for newcomersGood for newcomersui-uxFor tasks involving CSS, Tailwind, or Framer Motion improvements.For tasks involving CSS, Tailwind, or Framer Motion improvements.
🚀 Is your feature request related to a problem? Please describe.
The application currently only supports a bright light-mode interface. Many users prefer a dark theme to reduce eye strain, especially during long writing or research sessions and when working in low-light environments. I'm always frustrated when I have to use a high-brightness white screen at night.
💡 Describe the solution you'd like
I would like a consistent, high-quality Dark Mode across the entire platform. This includes:
A Light/Dark toggle in the Sidebar using lucide-react icons (Sun/Moon).
A native Tailwind CSS implementation that uses dark: prefixes and follows the standard dark class strategy on the root element.
A premium Dark/Slate charcoal-based color palette that maintains the "Humanizer" brand's aesthetic.
Persistence of the theme choice in localStorage so it stays selected after page reloads.
🎨 Describe alternatives you've considered
One alternative would be an "Auto-Mode" that follows the user's OS system preferences. However, providing a manual toggle gives users more fine-grained control over their experience. Another alternative is relying on browser extensions like "Dark Reader," but this often results in poor contrast and broken component styling compared to a native implementation.
📝 Additional context
This should be implemented in a way that all components (Sidebar, Dashboard, Editor, and Auth Modals) are fully checked for readability, contrast, and accessibility in the new dark theme.