在 Vue Vite 应用程序中轻松实现暗/亮模式

如何在 Vue Vite 应用程序中实现暗/亮模式？

在本文中，我将向您展示如何在没有第三方库的情况下，轻松地在 Vue Vite 应用程序中实现暗/亮模式功能。我们首先创建一个基本的 Vite 应用程序，然后为我们的应用程序设置一个简单的用户界面。

设置 Vue Vite 应用程序

要开始使用，请创建一个新的 Vite 应用程序，打开您的终端并运行以下命令：

npx @vitejs/create my-vite-app

然后，导航到新创建的应用程序目录并运行以下命令以启动开发服务器：

cd my-vite-app
npm run dev

设置用户界面

现在我们已经创建了应用程序，让我们为我们的暗/亮模式功能设置一个简单的用户界面。在 src 目录中，创建两个文件：App.vue 和 styles.css。

在 App.vue 中，添加以下代码：

<template>
  <div>
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isDarkMode = ref(false)

    const toggleTheme = () => {
      isDarkMode.value = !isDarkMode.value
    }

    return {
      isDarkMode,
      toggleTheme
    }
  }
}
</script>

在 styles.css 中，添加以下代码：

:root {
  --text-color: #000;
  --background-color: #fff;
}

.dark-mode {
  --text-color: #fff;
  --background-color: #000;
}

实现暗/亮模式功能

现在我们已经设置了用户界面，让我们来实现暗/亮模式功能。在 main.js 中，添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use((app) => {
  app.config.globalProperties.$isDarkMode = ref(false)

  app.config.globalProperties.$toggleTheme = () => {
    app.config.globalProperties.$isDarkMode.value = !app.config.globalProperties.$isDarkMode.value
  }
})

createApp(App).mount('#app')

使用暗/亮模式

现在我们已经实现了暗/亮模式功能，让我们在我们的组件中使用它。在 App.vue 中，添加以下代码：

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

结论

恭喜你！你现在已经成功地在你的 Vue Vite 应用程序中实现了暗/亮模式功能。这是一个非常有用的功能，可以帮助你的用户自定义他们的体验，并使你的应用程序在各种照明条件下都可访问。

欢迎您在评论中提出任何问题或建议。