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
<%= 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.