jargonsdev / jargonsdev/jargons.dev

Enhancement: Implement Dark Mode in UI

Offen
#14 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

:arrow_upper_right: medium priority :red_circle: wontfix :sparkles: enhancement
Vorherrschende Sprache
MDX
Sterne
56
Forks
45
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

The project currently uses Tailwind CSS, and the dark mode configuration is already set up. However, the implementation of dark mode in the UI is pending. We need to insert the "dark:" utility classnames in the respective places throughout the project's UI components to enable dark mode. Additionally, a dark mode toggle should be implemented to allow users to switch between `light`, `dark` and `system` modes.

**Scope of Work:**
1. Insert "dark:" utility classnames in the project's UI components to enable dark mode.
2. Implement a dark mode toggle that allows users to switch between light and dark modes.

**Resources:**
- [Dark Mode in Astro](https://www.kevinzunigacuellar.com/blog/dark-mode-in-astro/)
- [Tailwind CSS Dark Mode Documentation](https://tailwindcss.com/docs/dark-mode)

**Additional Information:**
- Dark mode is becoming a popular feature in web applications as it reduces eye strain and improves readability, especially in low-light environments.
- The project's dark mode should reflect the branding and design language of the existing UI in light mode.

**Submission Guidelines:**
- Developers working on this task should ensure that the dark mode implementation is consistent with the project's design and branding (hopefully we have one before you're seeing this, checkout #13).
- Any deviations from the existing design language should be discussed in comments below and approved by a maintainer 🙏.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit der Überprüfung der bestehenden Tailwind-Konfiguration für den Dark Mode und der UI-Komponenten und konsultiere anschließend die verlinkte Dokumentation zu Dark Mode in Astro und Tailwind CSS. Als abgeschlossen gilt die Aufgabe, wenn die UI konsistente Dark-Mode-Klassen und einen Umschalter unterstützt, der die Modi light, dark und system bietet, während das bestehende Branding erhalten bleibt; siehe #13 für die Designrichtung.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
tailwindcss
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.