Easy light and dark mode with Catppuccin and TailwindCSS
I was looking to spice up my site a little with a coordinated colour theme. I use cattppucin for my terminal theme and I wanted to use the same colours for my site. I found a tailwindcss plugin that pulled in catppuccin colours and made them available in tailwindcss via their common name: “pink”, “blue”, “green”, etc. This was great, but I didn’t want to have to manage two sets of colours for light and dark mode. I discovered a clever trick to make this work using a single className within the layout.tsx file in my NextJS setup, and I wanted to share it here on the off chance that someone else is also a fan of this colour scheme.