Vue 3 Composition API

The cleanest way to add Dark Mode to your Vue app.

Zero dependencies. Auto system-preference detection. LocalStorage persistence. Reactive to the core.

npm install @vueuse/core
// Wait, you don't even need npm! Just copy the composable below.
Get the Code

1. The Composable

Don't bloat your node_modules. Just create a useDarkMode.js file and paste this:

import { ref, watchEffect } from 'vue'

export function useDarkMode() {
  const isDark = ref(
    localStorage.getItem('theme') === 'dark' || 
    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
  )

  watchEffect(() => {
    const root = window.document.documentElement
    if (isDark.value) {
      root.classList.add('dark')
      localStorage.setItem('theme', 'dark')
    } else {
      root.classList.remove('dark')
      localStorage.setItem('theme', 'light')
    }
  })

  const toggle = () => { isDark.value = !isDark.value }

  return { isDark, toggle }
}

Proudly Sponsored By

Why Modern AI Interfaces Need Dark Mode

When developing modern web applications, especially in the AI Companion space, UI/UX is critical. Users interacting with generative models often engage in long conversation sessions, frequently during evening or nighttime hours.

If you analyze top-tier interfaces like OurDream.ai or Candy.ai, you will notice they heavily rely on dark UI components. A glaring white screen causes severe eye strain and ruins the immersive experience of chatting with an AI. By implementing a reactive Vue 3 Dark Mode composable, developers can instantly reduce blue light exposure and save battery life on OLED screens.

Whether you are building the next Lovescape alternative, a Girlfriend GPT interface, or just a standard SaaS dashboard, the code provided above is the exact architecture you need to deliver premium, toggleable themes with zero layout shift.