Dark mode is no longer a luxury, it's a must-have: Implement this feature in your Vue and Tailwind app in 10 minutes

Dark mode has become an expected feature for users. Not only does it reduce eye strain, it also saves battery on OLED screens and, let’s be honest, it just looks amazing. For a long time, implementing dark mode was a headache, but with Tailwind and Vue, it’s surprisingly simple.

Today I’ll show you how to add a dark mode toggle to your application in under 10 minutes, with clean and professional code.

The Magic of Tailwind: The dark: Modifier

The key to simplicity is Tailwind’s dark: modifier. You can apply any utility class in dark mode.

<div class="bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100">
</div>

When the dark class is applied to the <html> element of your document, Tailwind will automatically apply the classes with the dark: prefix.

Configure your tailwind.config.js like this:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // <--- Use 'class' instead of 'media'
  // ... rest of your config
}

Vue Implementation: A One-Minute Toggle

Now let’s create the logic to add and remove the dark class from the document.

<template>
  <button @click="toggleDarkMode" class="p-2 rounded-full transition-colors duration-300"
          :class="isDarkTheme ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-800'">
      {{ isDarkTheme ? 'Light Mode' : 'Dark Mode' }}
  </button>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

const isDarkTheme = ref(false);

const toggleDarkMode = () => {
  isDarkTheme.value = !isDarkTheme.value;
  localStorage.setItem('theme', isDarkTheme.value ? 'dark' : 'light');
};

watch(isDarkTheme, (isDark) => {
  if (isDark) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
}, { immediate: true });

onMounted(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    isDarkTheme.value = savedTheme === 'dark';
  } else {
    isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
});
</script>

Code Explanation

• ref(false): we use a reactive reference to control the theme state.
• toggleDarkMode: toggles the value and saves it in localStorage.
• watch: listens for changes and applies the dark class to <html>.
• onMounted: on startup, checks saved preferences or the system setting.

Conclusion

Adding dark mode to your app is no longer a weeks-long project; it’s a detail you can implement in minutes with the right tools. It shows that you don’t just build functional interfaces—you care about your users’ comfort and experience.

It’s a small touch that makes you look like a professional who builds for people.