✨ Feature Request: Add dark mode / dark theme toggle

[anurag5603]

Feature summary
Add a dark mode toggle so users can switch between light and dark themes.

Is your feature request related to a problem?
The website currently only has a light theme. Using the tool at night or in low-light environments causes eye strain due to the bright white background.

Describe the solution you'd like
A toggle button (e.g., sun/moon icon) in the top navigation bar that switches the entire UI between light and dark themes. The preference should ideally be saved in localStorage so it persists across sessions.

Describe alternatives you've considered
Using browser extensions like Dark Reader as a workaround, but a native dark mode would provide a much better and consistent experience.

Additional context
Many modern tools and websites (GitHub, VS Code, Notion) support dark mode as a standard feature. Since pdfToPng targets developers and power users, this would be a highly appreciated addition.

[anurag5603]

Hey @Durgeshwar-AI 👋

Just wanted to add some context to this request. A lot of file tools like pdfToPng are used during late-night work sessions, and a dark theme would make the experience significantly more comfortable.

Here's what a minimal implementation could look like:

• Toggle button in the navbar (🌙 / ☀️ icon)
• CSS variables for all colors to make theming easy
• localStorage.setItem('theme', 'dark') to persist the preference
• Respect prefers-color-scheme media query as the default

Happy to contribute a PR if you're open to it! Let me know. 🙌

[ishita526]

Hi @JiyaBatra,

I’d like to work on this issue under GSSoC 2026. I’ve gone through the problem statement and I have a clear approach to fix the z-index stacking context issue.

Proposed Approach:

• Inspect the current popup and dashboard layout to identify stacking context conflicts
• Fix layering using appropriate z-index hierarchy on popup container
• Ensure parent containers don’t create unintended stacking contexts (e.g., transform, overflow, position)
• If needed, render the popup using a React Portal so it mounts at the root level
• Verify the popup always appears above dashboard elements in all screen sizes
• Test hover/click behavior to ensure no regression in existing UI components

This will ensure the streak popup behaves like a proper tooltip/popover with correct visibility and layering.

Please assign this issue to me.