11ty-website icon indicating copy to clipboard operation
11ty-website copied to clipboard

GitHub icons are not legible in dark mode

Open AleksandrHovhannisyan opened this issue 2 years ago • 0 comments

Description

image

image

Steps to reproduce

  1. Visit any page in dark mode.
  2. Observe that the GitHub ::before images are not visible against the dark bg of the docs site.
  3. Related issue: Observe that the text in the "add yours" sidebar wraps awkwardly due to the presence of the icon.

Solution

Not sure... We can do background-color: currentColor on that ::before, but then some of the background clips:

image

It also won't work for light mode.

Another idea was to use a background radial image, but it doesn't seem to be possible to layer that with a background-image without obscuring it, even if we make some parts of the color transparent.

Is there a way to get images without transparency from the API?

AleksandrHovhannisyan avatar Mar 01 '22 12:03 AleksandrHovhannisyan