SrigadaAkshayKumar/chatapp-frontend

Implement Dark Mode for the Chat App

Ouverte

#5 ouverte le 9 févr. 2025

Voir sur GitHub
 (1 commentaire) (0 réaction) (1 personne assignée)JavaScript (3 forks)auto 404
UI/UXenhancementgood first issue

Métriques du dépôt

Stars
 (1 étoile)
Métriques de merge PR
 (Métriques PR en attente)

Description

🌙 Implement Dark Mode for the Chat App

📌 Description

Improve user experience by adding a Dark Mode feature for better eye comfort and accessibility.

🚀 Feature Requirements

  • ✅ Add a toggle button to switch between Light and Dark modes.
  • ✅ Use CSS variables for easy theme switching.
  • ✅ Ensure proper contrast and readability in Dark Mode.
  • ✅ Save user preference in local storage for persistence.

🛠 Tech Stack

  • CSS
  • JavaScript / React

🔄 Possible Implementation Steps

  1. Implement CSS variables for Light and Dark themes.
  2. Add a toggle switch for theme selection.
  3. Store the user's preference in local storage.
  4. Ensure consistent UI adjustments in Dark Mode.
  5. Test accessibility to maintain proper contrast.

🏷 Labels

🔹 UI/UX
🔹 enhancement
🔹 good first issue

Guide contributeur

Direction de recherche
Implémentez le mode sombre à l'aide de variables CSS et d'un bouton de bascule, enregistrez la préférence dans localStorage.
Stack technique
javascriptcssreact
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
CSSJavaScriptReact basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80