在我们的 Web 应用程序中实现深色主题已经从奢侈变成了必需品。 由于审美偏好和实际原因，设备用户现在希望从浅色主题切换到深色主题，反之亦然。
深色主题为用户界面提供了较深的调色板，使界面在低光环境下更舒适。 深色主题还有助于延长配备 OLED 或 AMOLED 屏幕的设备的电池寿命。
这些优点以及更多优点使得让用户选择切换到深色主题变得更加合理。
设置测试应用程序
为了更好地了解如何在 Vue 中添加深色主题，您需要创建一个简单的 Vue 应用程序来测试运行您的开发。
要初始化新的 Vue 应用程序，请从终端运行以下命令：
npm init vue@latest
此命令将安装最新版本的 create-vue 包，该包用于初始化新的 Vue 应用程序。 它还会要求您从一组特定的功能中进行选择。 您无需选择任何选项，因为这对于本教程的范围来说不是必需的。
将以下模板添加到应用程序 src 目录中的 App.vue 文件中：
<template>
<div>
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div><button class="toggle-button">Toggle Dark Mode</button>
</div>
</template>
上面的代码块以常规 HTML 描述了整个应用程序，没有脚本或样式块。 您将使用上述模板中的类来设置样式。 当您实施深色主题时，应用程序的结构将会发生变化。
使用 CSS 变量设置测试应用程序的样式
CSS 变量或 CSS 自定义属性是您可以在样式表中定义的动态值。 CSS 变量为主题化提供了出色的工具，因为它们允许您在一个位置定义和管理颜色和字体大小等值。
您将使用 CSS 变量和 CSS 伪类选择器为您的 Vue 应用程序添加常规主题和深色模式主题。 在 src/assets 目录中，创建 styles.css 文件。
将以下样式添加到此 styles.css 文件中：
:root {
--background-color: #ffffff;
--text-color: #333333;
--box-background: #007bff;
--box-text-color: #ffffff;
--toggle-button: #007bff;
}
[data-theme="true"] {
--background-color: #333333;
--text-color: #ffffff;
--box-background: #000000;
--box-text-color: #ffffff;
--toggle-button: #000000;
}
这些声明包含一个特殊的伪类选择器 (:root) 和一个属性选择器 ([data-theme=’true’]）。 您包含在根选择器中的样式以最高父元素为目标。 它充当网页的默认样式。
数据主题选择器以该属性设置为 true 的 HTML 元素为目标。 在此属性选择器中，您可以定义深色模式主题的样式，以覆盖默认的浅色主题。
这些声明都使用 — 前缀定义 CSS 变量。 它们存储颜色值，然后您可以使用这些值来设计应用程序的浅色和深色主题。
编辑 src/main.js 文件并导入 styles.css 文件：
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
现在，在数据主题选择器下方的 styles.css 中添加更多样式。 其中一些定义将使用 var 关键字引用颜色变量。 这使您可以通过切换每个变量的值来更改使用的颜色，就像初始样式一样。
* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
.styled-text {
font-size: 18px;
font-weight: bold;
}
.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
您可以使用通用 CSS 选择器在所有元素上设置过渡属性
* {
transition: background-color 0.3s, color 0.3s;
}
在切换模式时创建平滑的动画：
当切换深色模式时，这些过渡会导致背景颜色和文本颜色逐渐变化，从而产生令人愉悦的效果。
实现暗模式逻辑
<script setup>
import { ref } from 'vue';// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
要实现深色主题模式，您将需要 JavaScript 逻辑来在浅色主题和深色主题之间切换。 在您的 App.vue 文件中，将以下脚本块粘贴到用 Vue 的 Composition API 编写的模板块下方：
上面的脚本包含用于在 Web 应用程序中在浅色和深色模式之间切换的所有 JavaScript 逻辑。 该脚本以 import 语句开头，用于导入 ref 函数，以在 Vue 中处理反应式数据（动态数据）。
接下来，它定义了一个 getInitialDarkMode 函数，该函数从浏览器的 LocalStorage 中检索用户的深色模式首选项。 它声明了 darkMode 引用，并使用 getInitialDarkMode 函数检索到的用户首选项对其进行初始化。
saveDarkModePreference 函数使用 setItem 方法更新浏览器 LocalStorage 中用户的暗模式首选项。 最后，toggleDarkMode 函数将允许用户切换深色模式并更新浏览器的深色模式 LocalStorage 值。
应用深色模式主题并测试应用程序
<template>
conditionally -->
<div :data-theme="darkMode">
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<button @click="toggleDarkMode" class="toggle-button">
Toggle Dark Mode
</button>
</div>
</template>
现在，在 App.vue 文件的模板块中，将 data-theme 属性选择器添加到根元素，以根据您的逻辑有条件地应用暗模式主题：
在这里，您将数据主题选择器绑定到 darkMode 引用。 这确保了当 darkMode 为 true 时，深色主题将会生效。 按钮上的单击事件侦听器在浅色和深色模式之间切换。
npm run dev
在终端中运行以下命令来预览应用程序：
您应该看到这样的屏幕：
当您单击按钮时，应用程序应在浅色和深色主题之间切换：
学习在 Vue 应用程序中集成其他包
CSS 变量和 LocalStorage API 让您可以轻松地向 Vue 应用程序添加深色主题。
有许多第三方库和内置 Vue 附加功能可让您自定义 Web 应用程序并使用附加功能。