如何在Vue Vite應用程序中實現暗/亮模式

這篇文章主要為大家展示了“如何在Vue Vite應用程序中實現暗/亮模式”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何在Vue Vite應用程序中實現暗/亮模式”這篇文章吧。

在本文中，我將在不使用任何庫的情況下將dark\Light模式功能實現到我們的Vue Vite應用程序中。

我們將首先創建一個簡單的Vite應用程序，然后為我們的應用程序設置一個簡單的用戶界面。在創建我們的Vue應用程序之前，我想提到WrapPixel提供的一些很棒的免費Vue模板，它們可以免費下載并用于個人和商業用途。他們可以節省你的時間，因為你可以直接在你的項目中使用他們令人驚嘆的用戶界面，這將給你的應用程序帶來驚人的外觀和感覺，所以一定要去看看。

創建一個Vuejs Vite應用程序

要設置Vite應用程序，請打開您的終端并輸入以下內容：

npm init vite-app themeswitcher

這個命令將搭建一個新的vite應用程序，然后進入項目目錄安裝項目依賴項：

cd themeswitcher npm install

安裝后，我們現在可以使用 npm run dev 命令運行我們的應用程序：

code . && npm run dev

code . 命令將以VS Code打開我們的應用程序。

我們的應用程序現在將在端口3000上運行。

 

隨著應用程序的啟動和運行，我們現在可以創建CSS。在 public 目錄內創建一個  css/dark.css文件，這是我們將在黑暗模式環境中存儲所有CSS代碼的地方。

在dark.css文件中添加以下代碼：

:root {   --text: #ffffff;   --background: #1d1d23; }body {   background-color: var(--background) !important; }h2, h3, h4, h5, h6, h7, p, small, a {   color: var(--text) !important; }

現在將在head中創建一個link標簽將其設置為我們創建的 dark.css 文件，以便可以應用在此定義的所有樣式。

我們將使用Javascript類來執行此操作，在src目錄中創建 src/theme.js 文件，并添加以下代碼：

export default class themeChanger {     /**      * @constructor      */     constructor() {}     _addDarkTheme() {        const darkThemeLinkEl = document.createElement('link')         darkThemeLinkEl.setAttribute('rel', 'stylesheet')         darkThemeLinkEl.setAttribute('href', './css/dark.css')         darkThemeLinkEl.setAttribute('id', 'dark-theme-style')         const docHead = document.querySelector('head')         docHead.append(darkThemeLinkEl)    }    _removeDarkTheme() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         const parentNode = darkThemeLinkEl.parentNode         parentNode.removeChild(darkThemeLinkEl)    }    _darkThemeSwitch() {        const darkThemeLinkEl = document.querySelector('#dark-theme-style')         if (!darkThemeLinkEl) {             this._addDarkTheme()         } else {             this._removeDarkTheme()         }    }}

我們創建3種方法：

• _addDarkTheme()：這會將link標簽添加到應用程序的HTML head中。

• _removeDarkTheme()：這將刪除已添加到HTML head的link標簽。

• _darkThemeSwitch()：這將切換添加和刪除方法，以在我們的HTML head中添加和刪除link標簽。

我們可以繼續在Vue.js組件中使用此方法。

編輯 components/HelloWorld.vue 中的代碼，如下所示：

<template>   <h4>Vite is the future of Frontend Developement.</h4>   <small>Thanks to Evan You</small>   <br />   <button @click="darkThemeSwitch">switch</button> </template> <script> import themeChanger from "../util/theme.js"; export default {   name: "HelloWorld",   props: {     msg: String,   },   data() {     return {       themeChanger: null,     };   },   methods: {     darkThemeSwitch() {       this.themeChanger._darkThemeSwitch();     },   },   created() {     this.themeChanger = new themeChanger();   }, }; </script>

我們引入 themeChanger 類的實例，然后將其存儲在Vue.js data實例中。然后，我們創建一個按鈕，該按鈕將調用我們在 theme.js  文件中創建的 _darkThemeSwitch。

完成此操作后，我們現在可以在應用程序中在明暗模式之間切換。

以上是“如何在Vue Vite應用程序中實現暗/亮模式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！