SjxSubham/COntribute-HAcktoX

[Feature] Modify the UI for Dark Theme

Open

#17 opened on Oct 12, 2025

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (14 forks)auto 404
enhancementhacktoberfesthacktoberfest-accepted

Repository metrics

Stars
 (8 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

Modify/Implement dark mode for better user experience.

Current Behavior

The site only has a light color scheme.

Proposed Solution

Add dark mode support with a toggle button in the header or footer.

Implementation Ideas

  • Use React Context or state management for theme
  • Create dark mode color variants with Tailwind
  • Add a toggle button (sun/moon icon)
  • Persist user preference in localStorage
  • Respect system preference (prefers-color-scheme)

Acceptance Criteria

  • All sections properly styled in dark mode
  • User preference persists across sessions
  • Smooth transition between themes
  • Respects system color scheme preference

Additional Context

Tailwind CSS has built-in dark mode support with the dark: prefix.

Contributor guide

Research direction
Implement dark mode using Tailwind's dark: prefix, React Context for theme state, localStorage for persistence, and a toggle button. Also respect system preference with prefers color scheme.
Tech stack
javascriptreacttailwindcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTailwind CSS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75