Switching it up: How Tailwind CSS helped me create a dark mode logo in Rails

As someone that still swears by Bootstrap, I recently had the opportunity to try Tailwind CSS. I’m currently working on a new Rails 7 app for my wife, and I wanted to design a new logo for it. I used Illustrator to create the logo, and exported it as a PNG with a transparent background and white foreground. But I wanted to take it to the next level by adding an auto toggle between light and dark mode depending on the system settings.

I wasn’t sure how to achieve this effect without writing custom CSS or exporting another version of the logo for light mode screens, but I knew that there had to be a better way to achieve the effect I wanted. Sure, I could write a custom style class in CSS to invert the image, but then how do I check if dark mode is enabled as a system wide setting? Tailwind CSS to the rescue. After setting up Tailwind for my rails app, it was as simple as adding two utility classes to the logo in my header.erb file:

<%= image_tag 'brand/1x/logo.lightmode.png', class: "h-full dark:filter dark:invert" %>

These classes apply the invert(1) function to the CSS property filter , but only when system wide dark mode is enabled.

This was such a timesaver and cut down quite a few hoops in getting the logo right. I’m still discovering other utility classes in Tailwind CSS, one thing I know for sure is I might finally ditch Bootstrap for Tailwind for new Rails apps.

Preparing for a coding interview? Check out Firecode.io.