search

django / djangoproject.com

Source code to djangoproject.com
https://www.djangoproject.com/
BSD 3-Clause "New" or "Revised" License
1.86k stars 938 forks source link

Many company logos on the fundraiser page are unreadable in dark mode #1431

Open kevinrenskers opened 7 months ago

kevinrenskers commented 7 months ago

Many of the logos on https://www.djangoproject.com/fundraising/ are very badly readable in dark mode:

PANKAJ11111111 commented 7 months ago

Give chance i try Adjust Logo Colors:

Ensure that the logos have a color scheme suitable for dark mode. Darken or lighten the logos as needed to improve contrast against the background. Implement Logo Versions:

Create alternate versions of logos specifically designed for dark backgrounds. These versions can have adjusted colors or increased contrast to make them more visible. Background Contrast:

Check the background color in dark mode. If the logos are still not readable, consider adjusting the background color to enhance the contrast. Text Labels or Tooltips:

Provide text labels or tooltips when users hover over the logos. This ensures that even if the logos are not immediately readable, users can get information about the companies. Border or Outline:

Add a subtle border or outline to the logos to distinguish them from the background. This can enhance visibility, especially if the logos have intricate designs. Grayscale Conversion:

Convert the logos to grayscale in dark mode. This can sometimes improve readability by removing color complexities. Use SVGs:

If possible, use SVG (Scalable Vector Graphics) format for logos. SVGs can be easily manipulated and recolored with CSS, providing more flexibility for adjusting their appearance in different modes. Testing with Users:

Conduct usability testing with users who are likely to view the fundraiser page in dark mode. Gather feedback on the visibility of logos and use that input to make further improvements. Toggle Switch:

Consider adding a toggle switch that allows users to switch between light and dark modes manually. This gives users control over their preferred viewing mode. Provide User Preferences:

Allow users to customize their viewing preferences, including the ability to choose from a selection of color themes. This way, users can pick a theme that best suits their needs.