Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing Source Links for Social Media Icons in Dark Theme #139

Open
IgorWnek opened this issue Feb 5, 2024 · 0 comments
Open

Missing Source Links for Social Media Icons in Dark Theme #139

IgorWnek opened this issue Feb 5, 2024 · 0 comments

Comments

@IgorWnek
Copy link

IgorWnek commented Feb 5, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant