添加一個(gè)暗色模式類到根元素，使用:class 綁定dark-mode 類；2. 在全局CSS 中定義暗色樣式，利用CSS 變量實(shí)現(xiàn)主題切換；3. （可選）通過(guò)provide/inject 將暗色模式狀態(tài)和切換方法傳遞給子組件；4. （可選）在無(wú)本地存儲(chǔ)時(shí)，根據(jù)prefers-color-scheme 系統(tǒng)偏好設(shè)置默認(rèn)模式；最終實(shí)現(xiàn)一個(gè)帶持久化、支持系統(tǒng)偏好且可全局訪問(wèn)的暗色模式切換功能。

Implementing a dark mode toggle in a Vue app is straightforward and can be done in a few clean steps. Here's how to do it in a typical Vue 3 app (using Composition API and global CSS), with a toggle button that persists the user's preference.

? 1. Add a Dark Mode Class to the Root Element

Use a class (eg, .dark-mode ) on the or element to apply dark styles.

In your App.vue or main component:

 <template>
  <div id="app" :class="{ &#39;dark-mode&#39;: darkMode }">
    <header>
      <h1>My App</h1>
      <button @click="toggleDarkMode">
        {{ darkMode ? &#39;?? Light Mode&#39; : &#39;? Dark Mode&#39; }}
      </button>
    </header>
    <main>
      <slot />
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from &#39;vue&#39;;

const darkMode = ref(false);

// Check user preference from localStorage
onMounted(() => {
  const savedMode = localStorage.getItem(&#39;darkMode&#39;);
  darkMode.value = savedMode === &#39;true&#39;;
});

const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  localStorage.setItem(&#39;darkMode&#39;, darkMode.value);
};
</script>

? 2. Define Dark Styles in Global CSS

Add your dark theme styles using the .dark-mode class.

In assets/styles.css or main.css :

 /* Light mode defaults */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* Dark mode overrides */
.dark-mode {
  --bg-color: #121212;
  --text-color: #f5f5f5;
}

#app {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Optional: style body too */
body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: Arial, sans-serif;
}

Make sure to import this CSS in your main.js :

 import './assets/styles.css';

? 3. (Optional) Use a Provide/Inject Pattern for Global Access

If multiple components need to know the dark mode state or toggle it, wrap the state in a provider.

In App.vue :

 <script setup>
import { provide, ref, onMounted } from &#39;vue&#39;;

const darkMode = ref(false);

onMounted(() => {
  const savedMode = localStorage.getItem(&#39;darkMode&#39;);
  darkMode.value = savedMode === &#39;true&#39;;
});

const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  localStorage.setItem(&#39;darkMode&#39;, darkMode.value);
};

// Make available to child components
provide(&#39;darkMode&#39;, darkMode);
provide(&#39;toggleDarkMode&#39;, toggleDarkMode);
</script>

Then in any child component:

 <script setup>
import { inject } from &#39;vue&#39;;

const darkMode = inject(&#39;darkMode&#39;);
const toggleDarkMode = inject(&#39;toggleDarkMode&#39;);
</script>

<template>
  <button @click="toggleDarkMode">
    {{ darkMode ? &#39;Switch to Light&#39; : &#39;Switch to Dark&#39; }}
  </button>
</template>

? 4. (Bonus) Match User's System Preference

You can default to the user's OS preference if no setting is saved.

Update the onMounted logic:

 onMounted(() => {
  const savedMode = localStorage.getItem('darkMode');
  if (savedMode !== null) {
    darkMode.value = savedMode === 'true';
  } else {
    // Prefer user's system setting
    darkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
});

? Summary

• Use a reactive darkMode boolean.
• Toggle a class on the root element.
• Store preference in localStorage .
• Use CSS variables for theming.
• Optionally use provide/inject for global access.
• Respect system preferences as fallback.

That's it — no external libraries needed. Works smoothly with transitions and scales well.

Basically just a toggle, a class, some CSS, and persistence.

以上是如何在VUE應(yīng)用中實(shí)現(xiàn)暗模式切換？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！