ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Open

Aperta il 20 mar 2025

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (17.256 star) (2083 fork)batch import
help wanted

Descrizione

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

Guida contributor

Tech stack
typescriptcss
Dominio
frontend
Tipo issue
feature
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
fresh
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
HTMLCSSJavaScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
75
Direzione di ricerca
Inizia esplorando i file CSS esistenti nella directory del sito web del repository ionicons. Cerca eventuali variabili di tema o proprietà CSS personalizzate esistenti. La modalità scura dovrebbe essere implementata utilizzando una classe CSS su un elemento radice (ad esempio, 'dark') e proprietà CSS personalizzate per i colori. Un interruttore di attivazione/disattivazione può essere aggiunto all'intestazione del sito web utilizzando JavaScript semplice o il framework esistente. Assicurati che il rapporto di contrasto per le icone soddisfi gli standard WCAG AA in modalità scura. Rivedi come altri siti dell'ecosistema Ionic, come la documentazione di Ionic Framework, implementano la modalità scura per coerenza.