img.custom-logo {
    filter: invert(100%);
}

Hip, hip, hooray to one less HTTP request! Not bad for only 3 lines of code. I’ll take that over an additional HTTP request any day of the week.

If you have a solid color black logo in your WordPress block theme and want to make a dark color scheme for your website, the CSS invert colors filter can save the day.

The CSS filter: invert(100%) allowed me to change my all black raster logo to all white in the dark CSS scheme I’m coding for this blog. Man, CSS has come a LONG way since I started coding with it back in the day. This CSS method sure beats having to load up another .png file and require another HTTP request which equals more load time for the user!

// Future update: remove the logo HTTP request entirely and swap it for inline SVG code

Milliseconds are on the line! 😆

If you have the .ai, .svg, .eps, or whatever vector files for your website logo, it’s possible to render that logo to code and reduce yet another HTTP request for the user! To remove the logo HTTP request entirely, we could always just swap our logo to a new WordPress template part and use exported SVG code with custom CSS classes added to the paths. I think I will do that soon and make a post about it.