# 🖤 Automatic Dark mode for Hugo using Tailwind CSS DevFeed: [🖤 Automatic Dark mode for Hugo using Tailwind CSS]() Original publisher: [Read original article]() Author: Kaushik Gopal Published: 2025-04-04T23:01:08Z Content type: tutorial Language: en Sources: [Kaushik Gopal's Site]() Topics: [Dark Mode](), [CSS](), [Tailwind CSS](), [Hugo](), [implementation]() Tags: [css](), [dark-mode](), [html5](), [hugo](), [implementation](), [scheme](), [tailwind](), [tailwind-css]() ## AI overview This tutorial explains how to add automatic dark-mode support to a Hugo site using Tailwind CSS 4.0 and the CSS prefers-color-scheme media feature. The implementation updates theme color variables and adds a dark class to the root HTML element. ## Source excerpt On a ✈ back home, I decided to add Dark mode support to Henry. Having recently upgraded to Tailwind CSS 4.0, this was a piece of cake to do. I leverage the widely supported CSS @media prefers-color-scheme feature and Tailwind's native dark-mode support. The implementation only required a few changes: 1. update main theme.css ### In my main theme.css file where I declare the existing colors, I add the CSS @media selector for the "dark" variable indicator. @theme { /* henry background */ --color-hbg: var(--color-slate-50); --color-hbg-dark: var(--color-slate-200); /* ... */ } @media (prefers-color-scheme: dark) { .dark { /* henry background */ --color-hbg: #1c2b33; --color-hbg-dark: #152027; /* ... */ } } 2. update base html body ### In my root html page, I simply add the "dark" variable indicator class Now CSS automatically knows to pull in the dark variant of colors when the system indicates light/dark mode. There is no step 3! Your browser doesn't support HTML5 video. Download the video instead. This was so easy to do, in fact, that I even managed to catch up on Gladiator II on the plane ride which I personally give a solid 3.0 just for Denzel.