How to Create Dark Mode in Vue: Simple Toggle Example

To create dark mode in Vue, use a reactive state variable with ref to track the theme and toggle a CSS class on the root element. Use Vue's v-bind:class or :class directive to switch styles dynamically based on the dark mode state.

Syntax

Use Vue's ref to create a reactive boolean for dark mode state. Bind a CSS class to an element using :class that changes based on this state. Toggle the state with a button click.

• ref(false): creates a reactive variable starting as light mode.
• :class="{ 'dark': isDark }": adds the dark class when isDark is true.
• @click="toggleDarkMode": calls a method to switch the mode.

vue

<template>
  <div :class="{ dark: isDark }">
    <button @click="toggleDarkMode">Toggle Dark Mode</button>
    <p>This text changes style based on the theme.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isDark = ref(false)

function toggleDarkMode() {
  isDark.value = !isDark.value
}
</script>

<style>
.dark {
  background-color: #121212;
  color: #e0e0e0;
}

div {
  background-color: white;
  color: black;
  padding: 1rem;
  transition: background-color 0.3s, color 0.3s;
}
button {
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

Output

A white background page with black text and a button labeled 'Toggle Dark Mode'. Clicking the button switches the background to dark gray and text to light gray.

Example

This example shows a simple Vue component that toggles dark mode by switching a CSS class on the root div. The button click changes the theme reactively.

vue

<template>
  <div :class="{ dark: isDark }">
    <button @click="toggleDarkMode">Toggle Dark Mode</button>
    <p>Current mode: {{ isDark ? 'Dark' : 'Light' }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isDark = ref(false)

function toggleDarkMode() {
  isDark.value = !isDark.value
}
</script>

<style>
.dark {
  background-color: #222;
  color: #eee;
}

div {
  background-color: #fff;
  color: #000;
  padding: 2rem;
  font-family: Arial, sans-serif;
  transition: background-color 0.4s ease, color 0.4s ease;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  margin-bottom: 1rem;
}
</style>

Output

A page with a white background and black text showing 'Current mode: Light' and a button. Clicking the button toggles the background to dark gray, text to light gray, and updates the text to 'Current mode: Dark'.

Common Pitfalls

Common mistakes when creating dark mode in Vue include:

• Not using reactive state, so the UI does not update on toggle.
• Forgetting to bind the CSS class dynamically with :class.
• Applying styles only inline or without transitions, causing abrupt changes.
• Not considering accessibility, such as color contrast.

Always use Vue's reactivity and CSS transitions for smooth toggling.

vue

<!-- Wrong: Using a normal variable instead of ref -->
<script setup>
let isDark = false

function toggleDarkMode() {
  isDark = !isDark
}
</script>

<!-- Right: Use ref for reactivity -->
<script setup>
import { ref } from 'vue'
const isDark = ref(false)
function toggleDarkMode() {
  isDark.value = !isDark.value
}
</script>

Quick Reference

Tips for creating dark mode in Vue:

• Use ref to track dark mode state.
• Bind CSS classes dynamically with :class.
• Define dark mode styles in a CSS class like .dark.
• Use CSS transitions for smooth theme changes.
• Ensure good color contrast for accessibility.

Key Takeaways

Use Vue's ref to create a reactive dark mode state variable.

Toggle dark mode by dynamically adding or removing a CSS class with :class binding.

Define dark mode styles in CSS and use transitions for smooth visual changes.

Avoid non-reactive variables to ensure UI updates correctly.

Consider accessibility by choosing colors with good contrast.