[Feature Request] Option for different logo in dark/light mode

[istvnurbn]

Hi,

Would it be possible to add a separate dark/light mode logo to the site?

I'm now using a solution by @pushblue.

It is okay for now, but if there will be a major change in the header/footer partial this will cease to work.

My suggestion would be to add two separate icon params under the label group like so:

label:
  text: "my-title"
  iconDark: "my-darkmode-icon.svg"
  iconLight: "my-lightmode-icon.svg"

[icy-comet]

Since you are using SVGs anyway, you could just set fill='currentColor' and pass it to the iconSVG key (introduced with #976) if you want the same icon but just a different color.

[istvnurbn]

Hi!

I might not fully understand this. If I change the icon key to iconSVG and modify the full codes in the actual SVG file itself Hugo stops displaying the logo altogether.

What is the proper way to do this?

[icy-comet]

As discussed in the Twitter DMs, in order to use the iconSVG key, the icon key shouldn't be set as it takes precedence over iconSVG. Then, you can copy-paste the SVG contents as a multiline string in the iconSVG key and set fill='currentColor' of the root <svg> element to make SVG change colors between dark and light mode. You can control the color using custom CSS.