DEV Community


Discussion on: How to Switch Logo in Dark Mode

ashleyjsheridan profile image
Ashley Sheridan

As others have mentioned, you can just use an inline SVG for the logo and have the CSS change the colour, e.g. with svg { fill: #colour }.

It's worth bearing in mind though about things like colour contrast, especially at smaller sizes. Light text on a dark background has less contrast than dark text on a light background. This can matter if the logo is very small or used as a favicon. However, CSS can help there too, by allowing you to change the size of elements, change the stroke width, etc.