Hi all,

I managed to create a new icon for the mobile footer menu bar, but it does not work in dark mode.

I created my image and copied the colour from an existing footer image in light mode. Do I need another image or is there something I am missing and the colour somehow changes in a single image?

Either way, what's the correct approach?

You must adjust css inside svg, its a single image.

On the website i linked earlyer you have 2 dots white and black, where you can style them.

https://www.svgrepo.com/svg/509705/ace-of-spades?edit=true

If you want to do it manual;

https://stackoverflow.com/questions/67187091/creating-svg-that-appears-black-in-light-mode-and-light-in-dark-mode

Edited May 17, 20251 yr by Moestuin

Hi @Moestuin

I just finished this. In the end, I actually just needed to add:

stroke="currentColor" fill="currentColor" to the path attribute.

I did not need two images. I can't pretend to fully understand it.

Good that you got it working. From the web;

Using stroke="currentColor" and fill="currentColor" in an SVG means that the stroke (outline) and fill (interior) of the SVG will inherit the current text color (usually defined by CSS).

Why use currentColor?

• It allows SVGs to automatically match the surrounding text or element color without hardcoding a specific color.

• This is especially useful for theming and dark mode support.