
Dark mode in React is painful. So I built vartheme to fix it.
If you've ever tried adding dark mode to a React app… you know the pain. You configure Tailwind’s darkMode . Then you write CSS variables manually. Then you handle localStorage so the theme persists. Then you fix the flash of the wrong theme on page load. Then system theme detection breaks. Then your navbar is still white in dark mode 😅 Sound familiar? I got tired of repeating this in every project. So I built vartheme — a tiny React library that handles all of this in one line . 🚀 What is vartheme? vartheme is a zero-config, CSS variable based theme switching library for React. ✅ Dark mode in one line ✅ 5 beautiful built-in themes ✅ Animated sun/moon toggle (no icon library needed) ✅ Theme persists automatically ✅ System theme detection ✅ Under 7kb bundle ✅ Zero dependencies ✅ Full TypeScript support 😩 The Problem Without vartheme, adding dark mode usually looks like this: // 1. Setup Tailwind config // 2. Write CSS variables manually // 3. Handle localStorage // 4. Fix flash of wrong
Continue reading on Dev.to Webdev
Opens in a new tab




