Title : Improving Logo Visibility in Dark Mode on the Django Fundraiser Page
Synopsis
Many company logos on the Django fundraiser page (Support Django) become unreadable when viewed in dark mode. Since logos often have fixed colors that may not contrast well against dark backgrounds, this project aims to enhance their visibility using techniques such as dynamic logo swapping, background adjustments, or CSS filters.
Benefits to the Community
- Ensures sponsorship logos are clearly visible in both light and dark modes.
- Improves UI consistency and readability.
- Enhances the professional look of the Django fundraiser page.
Deliverables
- Identify logos that are unreadable in dark mode.
- Implement a solution such as:
- Dynamic switching between light/dark mode versions of logos (if available).
- Adding a background container for contrast.
- Applying CSS filters (e.g.,
invert()
,brightness()
, orgrayscale()
).
- Test the solution across different devices and themes.
- Update documentation if needed.
Technical Details
- Modify the existing CSS to support dark mode contrast adjustments.
- Detect and apply logo variations dynamically (e.g., using
prefers-color-scheme
). - Ensure the changes do not affect logo quality or branding guidelines.
- Test across browsers and themes to maintain consistency.
Expected Outcome
A visually improved Django fundraiser page where all sponsor logos remain clearly visible in both light and dark modes, ensuring better user experience and maintaining professional aesthetics.