ionic-team/ionicons

feat: Add Dark Mode Support to Ionicons Website

Offen

#1.438 geöffnet am 20.03.2025

Auf GitHub ansehenContributor Guide
 (1 Kommentar) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (2.083 Forks)batch import
help wanted

Repository-Metriken

Stars
 (17.256 Sterne)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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

Contributor Guide

Research-Richtung
Beginnen Sie mit der Untersuchung der vorhandenen CSS Dateien im Website Verzeichnis des ionicons Repositorys. Suchen Sie nach vorhandenen Designvariablen oder benutzerdefinierten CSS Eigenschaften. Der Dunkelmodus sollte mithilfe einer CSS Klasse auf einem Stammelement (z. B. 'dark') und benutzerdefinierten CSS Eigenschaften für Farben implementiert werden. Ein Umschalter kann mithilfe von reinem JavaScript oder dem vorhandenen Framework zur Kopfzeile der Website hinzugefügt werden. Stellen Sie sicher, dass das Kontrastverhältnis für Symbole im Dunkelmodus den WCAG AA Standards entspricht. Überprüfen Sie, wie andere Sites des Ionic Ökosystems, wie die Ionic Framework Dokumentation, den Dunkelmodus für Konsistenz implementieren.
Tech Stack
typescriptcss
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
HTMLCSSJavaScript
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75