danielcranney/profileme-dev

Missing Source Links for Social Media Icons in Dark Theme

Opened this issue · 0 comments

Description

I've encountered an issue where the source links for some of the social media icons are not available for dark theme. <source> related with <picture> which has media query for dark scheme has srcset as undefined.

This results in the icons not being displayed properly for users who prefer the dark mode interface.

This is related with Socials application page.

Steps to Reproduce

Navigate to the website's homepage (or any page featuring social media icons).
Switch to the dark theme using the theme toggle option.
Observe that some social media icons are not visible or improperly displayed.
Expected Behavior

All social media icons should be visible and properly displayed regardless of the selected theme. The source links for these icons should be correctly specified to ensure they are loaded in both light and dark themes.

Actual Behavior

Some social media icons are missing or not displayed correctly when the dark theme is enabled. It appears that the source links for these icons might be missing or incorrect, leading to a failure in loading them for the dark theme.

This is only visible in markdown code. When you look at the preview in the application (with dark mode enabled) you will just see icon for light theme.

Possible Solution

Not sure how this app works. But probably if dark theme icon is not available there should be fallback to light theme's one.

Environment

Browser: Arc (chromium based)
Operating System: MacOS

Screenshots

image image

Example Code

Generated markdown for picture element for Instagram:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="undefined" />
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/instagram.svg" />
  <img src="https://raw.githubusercontent.com/danielcranney/readme-generator/main/public/icons/socials/instagram.svg" width="32" height="32" />
</picture>

Additional Context

If you can provide some additional info about app (or I will have enough time to dig) I can help with fix if that's possible.