Changing Icon Color Automatically According to Dark or Light Theme

[abwildan]

Hello, guys.
I am a new user of Hugo and Blowfish.

I'd like to know how to add an adaptive svg icon so that it would be white (or brighter color) when in dark mode and black (or darker) when in light mode. I want to put the svg icon to my "pre" icon on site's menu. Actually, I know that I need to put the new svg icon to assets/img/ directory, but it doesn't automatically make the new icons adaptive.

[ZhenShuo2021]

You can make the SVG adaptive by using currentColor. For example, you have a red SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="9 2 6 6">
  <path fill="red" d="M12 2L15 8H9L12 2Z"/>
</svg>

To make it adaptive, change the fill attribute from red to currentColor.

[abwildan]

Where should I put that code? Directly inside the markdown file? Or can I have a certain template in html file or something? I want the SVG to be at the "pre" of the site's menu like this:

[ZhenShuo2021]

Create assets/icons/tech.svg, and set the menus.toml like this:

[[main]]
  name = "Tech"
  pageRef = "/path/to/tech"
  Pre = "tech"
  weight = 90

Document

[abwildan]

I know it, but, as you can see from the given picture, the two custom svg icon ( "the Tech" & "the Chess") did not adapt to the dark theme, they are still black even in the dark theme. Where should I put the "currentColor" code you already metioned?

[ZhenShuo2021]

Simply add fill="currentColor" to the <path> inside your SVG file, just like in the example earlier. This will let your icons automatically adapt to light and dark themes.

[abwildan]

Thanks, bro! I've been confused and struggling a lot (truely) to find out the solution. I actually have no idea "how to edit" svg file, but after a little google-ing, I've found it! So, thanks for patiently responding me and giving the solution! Case closed!