ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

#1 438 ouverte le 20 mars 2025

Voir sur GitHub
 (1 commentaire) (0 réactions) (0 assignés)TypeScript (2 083 forks)batch import
help wanted

Métriques du dépôt

Stars
 (17 256 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

Describe Problem

Currently, the Ionicons website does not support dark mode. Many users prefer or rely on dark themes to reduce eye strain, especially in low-light environments or at night. Having only a light mode can make it harder for some users to navigate the site comfortably.

Describe Preferred Solution

  • Implement a CSS-based dark mode.
  • Add a toggle switch to enable or disable dark mode manually or automatically.
  • Ensure Ionicons Web Components have proper contrast in dark mode.
  • Match the dark mode experience with other Ionic ecosystem sites.

Describe Alternatives

No response

Additional Information

No response

Guide contributeur

Direction de recherche
Commencez par explorer les fichiers CSS existants dans le répertoire du site web du dépôt ionicons. Recherchez toutes les variables de thème ou propriétés CSS personnalisées existantes. Le mode sombre doit être implémenté en utilisant une classe CSS sur un élément racine (par exemple, 'dark') et des propriétés CSS personnalisées pour les couleurs. Un interrupteur de bascule peut être ajouté à l'en tête du site web en utilisant du JavaScript pur ou le framework existant. Assurez vous que le rapport de contraste des icônes respecte les normes WCAG AA en mode sombre. Examinez comment d'autres sites de l'écosystème Ionic, comme la documentation d'Ionic Framework, implémentent le mode sombre pour assurer la cohérence.
Stack technique
typescriptcss
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.
Récente
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
HTMLCSSJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75