Enhancement: Add support for system dark mode via prefers-color-scheme or manual theme toggle

[Akhilesh29]

Is your feature request related to a problem? Please describe.

Many users (including myself) prefer or require dark mode for reduced eye strain, especially during late-night coding/browsing. Modern browsers support the prefers-color-scheme media query, and popular sites (GitHub, Stack Overflow, Twitter/X, etc.) automatically adapt to the user's system preference (light/dark).

Currently, Algora.io appears to use a fixed light theme:

• No visible dark mode toggle in the UI (header, footer, profile pages, bounty boards, etc.).
• The site does not seem to respect prefers-color-scheme: dark — elements stay in light mode even when the OS/browser is set to dark.

This leads to inconsistent experience when users switch system themes.

Describe the solution you'd like

Implement automatic dark mode support by:

1. Using Tailwind CSS dark: variants (if already using Tailwind) or CSS custom properties/variables with @media (prefers-color-scheme: dark) queries.
2. Adding a manual theme toggle (sun/moon icon) in the header or settings for users who want to override system preference.
3. Ensuring all elements adapt properly: backgrounds, text colors, cards, borders, syntax highlighting (if any), charts (e.g., punchcard), buttons, modals, etc.

Happy to help test or submit a PR if it sounds good? @zcesur

Thanks for building a great OSS bounty platform!

[xyaz1313]

Hey, I'd like to work on this. I've implemented dark mode with Tailwind CSS variants and media queries in several projects before. I can set up both automatic system detection and a manual toggle. Happy to start right away and submit a PR.

[Akhilesh29]

Hey, I'd like to work on this. I've implemented dark mode with Tailwind CSS variants and media queries in several projects before. I can set up both automatic system detection and a manual toggle. Happy to start right away and submit a PR.

@zcesur can you assign this task to @xyaz1313 ?

[ericjoye]

Understands the issue: missing support for prefers-color-scheme: dark breaks dark mode users' experience. Will add CSS media query overrides for dark theme detection, a manual toggle in the header/footer (stored in localStorage), and propagate it across pages. Previously built CSS-based theming for two projects. Happy to open a PR or work on fixed-price/hourly terms.

[ericjoye]

Understood—Algora’s fixed light theme ignores prefers-color-scheme: dark and lacks a manual toggle, forcing users to squint at night. I’d add CSS variables for light/dark modes, a toggle in the header, and a media query listener to auto-switch based on system preference. Recent projects included theming work with React and CSS custom props. Would a PR work for the bounty, or do you prefer hourly?

[zanabalofficial]

I'd like to work on this dark mode feature. I can implement automatic dark mode using Tailwind CSS dark: variants and add a manual toggle. Let me know if this is still a priority!