jargonsdev / jargonsdev/jargons.dev
Enhancement: Implement Dark Mode in UI
Dieses Issue hat noch niemand übernommen.
- 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
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Ö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