fix: Add outline to dark logo

[avirsaha]

close: #1640

Changes Made

• Added White Outline: Included a new <text> element with a white stroke and no fill to create the outline effect.

Benefits

• Improved Visibility: The white outline makes the text more distinguishable, especially on complex backgrounds or varying colors.
• Enhanced Contrast: Provides a clear visual separation between the text and the background, improving overall text clarity.

Notes

• No changes were made to other elements in the SVG file.
• Ensure to review the updated SVG in various environments to verify the visual effect.

[fkiraly]

This is nice! Though it looks now it is not visible in light mode now? The logo should be fully visible in both light and dark mode.

[avirsaha]

Thank you for your feedback. I understand you want the logo to look the same on both light and dark themes. In my last commit, I added an outline to the black text, but it isn’t visible on light backgrounds. I also understand you want minimal changes to the logo’s appearance and source.

Before proceeding, I’d like to clarify:

1. Are changes to the color scheme acceptable? For example, replacing the black text with purple or blue could ensure visibility on both themes.

2. Can the border color be changed to a shade of orange from the logo?

Please let me know which option you prefer or suggest alternatives. I’ll make the updates once confirmed.

---

Some Examples:

[fkiraly]

Dear @avirsaha, apologies I think I was mistaken - I thought the dashed lines in the symbol were, in fact, black lines going across the dashes, but I was mistaken and that's not actually a problem.

The main problem is with the dark font of "pytorch". Along those lines, I think your original proposal was actually ok, and I got confused.

Regarding the idea to use different colours for the font - what would your preference be here?

[fkiraly]

To explain more, I was seeing lines in the logo where there are none, I have added them for illustration of what I was seeing:

I am guessing this is similar to the "scintillating grid illusion" and the kinds of contrast present in dark mode: https://en.wikipedia.org/wiki/Grid_illusion

As said above, there are no actual lines there, so nothing needs contrast enhancement in dark mode.

The main concern is the dark font, which you have addressed.

[fkiraly]

On that note, I wonder whether it would be better if we made the dashes shorter, to make it clearer there is a dashed line there?

[avirsaha]

Dear @avirsaha, apologies I think I was mistaken - I thought the dashed lines in the symbol were, in fact, black lines going across the dashes, but I was mistaken and that's not actually a problem.

The main problem is with the dark font of "pytorch". Along those lines, I think your original proposal was actually ok, and I got confused.

Regarding the idea to use different colours for the font - what would your preference be here?

Thank you for the clarification. For the font color, I recommend darker shades of blue, magenta, or teal. These colors offer good contrast with the orange elements and effectively replace black. For additional color combination ideas, please refer to Colors That Go with Orange. Please note that not all options may ensure visibility on both light and dark backgrounds. I look forward to your feedback on these suggestions or any other preferences you might have.

[fkiraly]

Hm, in terms of preferences, I have no clear one, just things to look out for:

• good readability/visibility, contrast, including to colour blind and visibility impaired individuals
• not accidentally replicating a country flag or other symbol with political meaning
• above are true for light and dark background

I think among your suggestions, only the blue/orange (or amber/teal) combination meets these, and I'd be happy to go with that. Also FYI @jdb78.

Some added info about blue/orange:

• the scikit-learn logo is blue and orange, this is also a commonly emulated combination in AI
• there are some other connotations but I do not consider them strong enough to be problematic, e.g., the play Blue/Orange, or "blue and orange morality"

[avirsaha]

I appreciate the feedback. I will proceed with implementing the blue/orange combination as suggested. Please feel free to share any further preferences.

[avirsaha]

Please note that instead of the blue example provided earlier, I have updated the text to a much lighter shade of blue with a purple tint, as the original blue was not clearly visible on mobile devices. I hope you like the changes made, and please feel free to suggest any further adjustments.

[fkiraly]

the original blue was not clearly visible on mobile devices

Could you kindly explain whay it was not visible? More detail on what the conditions are here, I would like to understand them, please.

[avirsaha]

Could you kindly explain whay it was not visible? More detail on what the conditions are here, I would like to understand them, please.

Following our earlier discussions, I implemented the color changes to the logo. While the dark blue color looked vibrant on desktop screens, it appears blurry and less distinct on the mobile app. This discrepancy may be due to differences in color profiles between the mobile app and the website.

For your reference, here are the screenshots:

Logo Version	Mobile Screenshot	Desktop Screenshot
New Blue Logo
Previous Blue Logo
Current Black Logo

Please let me know if you would like to revert to the previous version or explore other color options.

[fkiraly]

hm, I see - but this is not blue but a shade of violet, is it not?

Violet is less discriminative vs blue for certain colour blind people as far as I know. I think we should prioritize visibility to colour blind above slight blurriness on mobile (I don't think it's too bad, but I agree it's harder to read).

[fkiraly]

On that note, maybe to get clarity here: I do not think the colour you call "new blue" is actually blue in the sense most people would call something blue. So I suspect one of us might be colour blind?

Further, irrespective, it might be good to go with a lighter shade of blue, perhaps just sth close to the blue in the sklearn logo?

[avirsaha]

I have implemented the requested color change in the logo, now using the Scikit-learn blue. Please take a look and feel free to share your feedback or let me know if any further adjustments are needed.

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.14%. Comparing base (6c66358) to head (3285d54).

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1649   +/-   ##
=======================================
  Coverage   90.14%   90.14%           
=======================================
  Files          32       32           
  Lines        4780     4780           
=======================================
  Hits         4309     4309           
  Misses        471      471           

Flag	Coverage Δ
cpu	90.14% <ø> (ø)
pytest	90.14% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[fkiraly]

Thanks!

I think this is good contrast both between the colours and in dark and light mode.