I didn't try this but I suppose you can have an arrow-white.svg file and use a theme-dependent variable to load the image?

@huy_ngo @AaronTheIssueGuy That's what I thought, but that makes the image invinsible. :|

@hund I see. I guess a color that looks visible on both background can be chosen, but it probably will have too much highlight than it deserves.

@huy_ngo and @hund, for SVG fill="currentColor" would apply the foreground color.

It looks like the SVG is already using fill="currentColor". It seems importing it as background image just makes it black and not using whatever color used in the page.

@hund there is actually support for darkmode, if you hive your SVG the color/stroke of “currentColor” it will inherit the “color” from the CSS styles.

@hund Sorry, I see my autocorrect tried to help me. See this article for what I meant:

@hund what about hyperlinked images? <a href=".."><img src="..."/></a>.

you'll probably need JavaScript to remove the icon for this kind of stuff.

@hund the CSS selector you wrote will also add the icon to <a> tags that contain an image (clickable images).. Imagine a large image with a small external link icon next to it. I know this from experience :)

@can I see. I haven't thought about it. I don't use external images. :)

Sign in to participate in the conversation

Fosstodon is an English speaking Mastodon instance that is open to anyone who is interested in technology; particularly free & open source software.