# A lovely little dark mode toggle *A brief overview of a lovely little dark mode toggle* By [henrypye](https://paragraph.com/@henrypye) · 2023-11-10 coding, web-development, dark-mode --- ![](https://storage.googleapis.com/papyrus_images/688bca65bc4da0a7dabc088fc72377dd.png) For the last year or so I have been using [TailwindCSS](https://tailwindcss.com/docs/dark-mode). It's great. It's truly a breath of fresh air from plain CSS. For me, someone who prefers to write code than spend hours bloating out my code base, it is a dream. One of the first things I played with in Tailwind is the ability to create and manage dark mode. The [docs](https://tailwindcss.com/docs/dark-mode) are pretty good at describing the different ways to achieve dark mode in Tailwind. To get started, I used the system preferred mode. Simple enough. The next step is to create a button to toggle dark mode on or off. I spent the last few hours doing this and here's what I learned... Firstly, my setup - Next.JS 13 with the pages router. The first issue I ran into was where to place the `dark` class at a top level so every child component can adjust accordingly. I started by placing it in the `_app` file, and setting the background on the `` tag - no bueno. I was unable to toggle `dark` on/off. So, I created a context - `DarkModeContext`. I placed this context _around_ the main Html tag. Again, no bueno. NextJS renders the context in `_app` on the server. I don't want to lose server side rendering so best to not force `_app` to render on the client. Hmm. Okay. What to do. What if I use the context I created? If I can add/remove the dark mode toggle from the main Html element then that will achieve what I want. By doing this, I can manage the dark mode state in one place, make it available to the whole app, and toggle dark mode on/off. Perfect! const DarkModeContextProvider = ({ children }: Props) => { const [darkMode, setDarkMode] = useState(false); useEffect(() => { const toggleDarkMode = () => { const rootElement = document.documentElement; rootElement.classList.toggle("dark", darkMode); }; toggleDarkMode(); }, [darkMode]); return ( {children} ); }; Thanks for reading about a lovely little dark mode toggle! --- *Originally published on [henrypye](https://paragraph.com/@henrypye/a-lovely-little-dark-mode-toggle)*