DEV Community

Cover image for Switching it up: how Tailwind CSS helped me create a dark mode logo in Rails

Posted on

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 a toggle between light and dark mode depending on the user's preference or the system settings.

Adobe Illustrator

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 for this, 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" %>
Enter fullscreen mode Exit fullscreen mode

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

Light mode demo

Dark mode demo

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.

Are you preparing for a coding interview? Check out

Top comments (0)