DEV Community: SUMIT

Dark Mode in 1 Line of Code — Meet vartheme

SUMIT — Sat, 21 Mar 2026 12:39:54 +0000

If you've ever implemented dark mode in React, you already know the struggle.

You end up:

Setting up context
Writing localStorage logic
Handling system preferences
Fixing flash of white on load (FOUC)
Wiring CSS variables

And before you know it… you've written 200+ lines of boilerplate that has nothing to do with your actual app.

So I built vartheme.

🚨 The Problem With Dark Mode Today

Most developers fall into one of these approaches:

1. Roll Your Own

❌ 200+ lines of code
❌ Breaks in SSR / Next.js
❌ Repeated effort every project

2. Use `next-themes`

✅ Good library
❌ Tied to Next.js
❌ No CSS variables
❌ No built-in UI

3. Use UI Library Themes

❌ Locked into their design system
❌ Limited flexibility

💡 What I Wanted

A solution that:

✅ Works in any React setup (Vite, Next.js, Remix, CRA)
✅ Uses CSS variables
✅ Includes a beautiful toggle UI
✅ Is SSR safe
✅ Persists user preferences

⚡ Introducing vartheme

A simple, flexible, and powerful theming solution for React.

🚀 Dark Mode in 1 Line

npm install vartheme

import { ThemeProvider, ThemeToggle } from 'vartheme'

export default function App() {
  return (
    <ThemeProvider>
      <ThemeToggle />
    </ThemeProvider>
  )
}

That’s it.

You instantly get:

✅ Light / Dark / System mode
✅ Animated toggle (🌞 / 🌙)
✅ localStorage + cookie persistence
✅ CSS variables auto-injected
✅ SSR safe

🎨 Using CSS Variables

.card {
  background: var(--vt-surface);
  color: var(--vt-text);
  border: 1px solid var(--vt-border);
}

.button {
  background: var(--vt-primary);
  color: white;
}

🎭 Built-in Themes

import { useThemeContext } from 'vartheme'

const { setTheme } = useThemeContext()

setTheme('ocean')
setTheme('forest')

⚙️ Next.js (App Router) — Fully SSR Safe

const isBrowser = typeof window !== 'undefined'

export function saveMode(mode) {
  if (!isBrowser) return
  localStorage.setItem('vartheme-mode', mode)
}

import { getFOUCScript } from 'vartheme'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>{getFOUCScript()}</head>
      <body>{children}</body>
    </html>
  )
}

import { cookies } from 'next/headers'
import { loadModeFromCookieString } from 'vartheme'

export default function RootLayout({ children }) {
  const mode =
    loadModeFromCookieString(cookies().toString()) || 'system'

  return <html data-theme={mode}>{children}</html>
}

🧩 shadcn/ui & Radix UI Support

<ThemeProvider strategy="class" />

🧠 useThemeContext Hook

import { useThemeContext } from 'vartheme'

function Navbar() {
  const { resolvedMode, toggle } = useThemeContext()

  return (
    <button onClick={toggle}>
      {resolvedMode === 'dark' ? '☀️ Light' : '🌙 Dark'}
    </button>
  )
}

🎨 Custom Colors

<ThemeProvider colors={{ primary: '#EC4899' }} />

🌬 Tailwind Plugin

import { varthemePlugin } from 'vartheme/tailwind'

export default {
  plugins: [varthemePlugin],
}

📦 Package Details

📦 16.8kb
⚡ Zero dependencies
🧠 TypeScript support

🚀 Get Started

npm install vartheme

❤️ Final Note

Built this because I was tired of rewriting the same dark mode logic in every project.

If this helps you:
👉 Drop a ⭐ on GitHub

👉 Share it with other devs 🚀

Dark mode in React is painful. So I built vartheme to fix it.

SUMIT — Wed, 25 Feb 2026 10:47:32 +0000

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 theme
// 5. Handle system theme detection
// 6. Write a toggle component
// 7. Debug for 2 hours
// 8. Still not working properly

✅ The Solution

With vartheme:

import { ThemeProvider } from 'vartheme'

export default function App() {
  return (
    <ThemeProvider theme="ocean" mode="dark">
      <YourApp />
    </ThemeProvider>
  )
}

That’s it. Dark mode done.

🎨 Built-in Themes

vartheme comes with 5 ready-to-use themes:

• Default — Purple/Violet
• Ocean — Blue/Teal
• Forest — Green/Lime
• Sunset — Orange/Pink
• Rose — Pink/Red

Switch themes instantly:

<ThemeProvider theme="forest">

🎯 CSS Variables (Use anywhere)

.card {
  background: var(--vt-surface);
  color: var(--vt-text);
  border: 1px solid var(--vt-border);
}

.button {
  background: var(--vt-primary);
  color: white;
}

No more hardcoding colors. No more theme context headaches.

⚡ Powerful Hook

Need more control?

import { useThemeContext } from 'vartheme'

function Navbar() {
  const { resolvedMode, toggle, setTheme, setColors } = useThemeContext()

  return (
    <div>
      <button onClick={toggle}>
        {resolvedMode === 'dark' ? '☀️' : '🌙'}
      </button>

      <button onClick={() => setTheme('ocean')}>Ocean</button>

      <button onClick={() => setColors({ primary: '#EC4899' })}>
        Pink Mode
      </button>
    </div>
  )
}

🌙 Built-in Animated Toggle

No icons. Pure CSS.

import { ThemeToggle } from 'vartheme'

<ThemeToggle size={48} />

📦 Install

npm install vartheme

Bundle size: ~7kb. Zero dependencies. TypeScript ready.

🔗 Links

📦 npm: https://www.npmjs.com/package/vartheme
🔷 GitHub: https://github.com/sumitt-wayne/vartheme
🌐 Website: https://vartheme.vercel.app

If you find it useful, drop a ⭐ on GitHub — it really means a lot!

What features would you like to see next? Let me know in the comments 👇