Visibility Issue with GitHub and Discord SVG Icons in Light Mode

[PaoloDiBello]

Steps to Reproduce:

1. Login to the application.
2. Ensure that light mode is enabled.
3. Navigate to the user profile.
4. Scroll down to the linked accounts section.

Expected Behavior:

The GitHub and Discord SVG icons should be visible and distinguishable in light mode.

Actual Behavior:

The icons are currently displayed in white, making them difficult to see against the light background in light mode.

Additional Information:

This issue is observed in light mode. The problem is specifically with the color of GitHub and Discord SVG icons. Other icons are displaying correctly.

Screenshot:

Suggestions:

Since the image tag was used, you could use this CSS snippet when light-mode is enabled.

  filter: invert(1);

[PaoloDiBello]

Since the image is shown dinamically using src={`https://authjs.dev/img/providers/${d}.svg/`} in src/app/(stories)/(main)/profile/button.jsx it might be more challenging, one might need to add the style if a condition is met.

[rgerum]

I guess we would need to use custom icons. Maybe like the instagram/twitter/... icons with a css color that it changed with the color scheme.

[PaoloDiBello]

@rgerum Yeah, that could work too. It is generally safer to have your own hosted images/svgs.

[PaoloDiBello]

@rgerum it's still the same for me

[rgerum]

Did you try the beta page? Maybe you need to reload to empty the cache (Ctrl+F5) https://beta.duostories.org/auth/signin?callbackUrl=https%3A%2F%2Fbeta.duostories.org%2F

[PaoloDiBello]

@rgerum The problem is in the profile page

[rgerum]

Ah ok. I saw the problem on the login page. The problem was in two places. Sorry my fault, I should have read your post more carefully.

[rgerum]

[rgerum]

Now I also added the icons to the profile page. (https://beta.duostories.org/profile) Thanks for checking if it was actually fixed.