如何在Vue Vite應(yīng)用程序中實(shí)現(xiàn)暗/亮模式

這篇文章主要為大家展示了“如何在Vue Vite應(yīng)用程序中實(shí)現(xiàn)暗/亮模式”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何在Vue Vite應(yīng)用程序中實(shí)現(xiàn)暗/亮模式”這篇文章吧。

在本文中，我將在不使用任何庫(kù)的情況下將dark\Light模式功能實(shí)現(xiàn)到我們的Vue Vite應(yīng)用程序中。

我們將首先創(chuàng)建一個(gè)簡(jiǎn)單的Vite應(yīng)用程序，然后為我們的應(yīng)用程序設(shè)置一個(gè)簡(jiǎn)單的用戶界面。在創(chuàng)建我們的Vue應(yīng)用程序之前，我想提到WrapPixel提供的一些很棒的免費(fèi)Vue模板，它們可以免費(fèi)下載并用于個(gè)人和商業(yè)用途。他們可以節(jié)省你的時(shí)間，因?yàn)槟憧梢灾苯釉谀愕捻?xiàng)目中使用他們令人驚嘆的用戶界面，這將給你的應(yīng)用程序帶來驚人的外觀和感覺，所以一定要去看看。

創(chuàng)建一個(gè)Vuejs Vite應(yīng)用程序

要設(shè)置Vite應(yīng)用程序，請(qǐng)打開您的終端并輸入以下內(nèi)容：

npm init vite-app themeswitcher

這個(gè)命令將搭建一個(gè)新的vite應(yīng)用程序，然后進(jìn)入項(xiàng)目目錄安裝項(xiàng)目依賴項(xiàng)：

cd themeswitcher npm install

安裝后，我們現(xiàn)在可以使用 npm run dev 命令運(yùn)行我們的應(yīng)用程序：

code . && npm run dev

code . 命令將以VS Code打開我們的應(yīng)用程序。

我們的應(yīng)用程序現(xiàn)在將在端口3000上運(yùn)行。

 

隨著應(yīng)用程序的啟動(dòng)和運(yùn)行，我們現(xiàn)在可以創(chuàng)建CSS。在 public 目錄內(nèi)創(chuàng)建一個(gè)  css/dark.css文件，這是我們將在黑暗模式環(huán)境中存儲(chǔ)所有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; }

現(xiàn)在將在head中創(chuàng)建一個(gè)link標(biāo)簽將其設(shè)置為我們創(chuàng)建的 dark.css 文件，以便可以應(yīng)用在此定義的所有樣式。

我們將使用Javascript類來執(zhí)行此操作，在src目錄中創(chuàng)建 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()         }    }}

我們創(chuàng)建3種方法：

• _addDarkTheme()：這會(huì)將link標(biāo)簽添加到應(yīng)用程序的HTML head中。

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

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

我們可以繼續(xù)在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 類的實(shí)例，然后將其存儲(chǔ)在Vue.js data實(shí)例中。然后，我們創(chuàng)建一個(gè)按鈕，該按鈕將調(diào)用我們?cè)?theme.js  文件中創(chuàng)建的 _darkThemeSwitch。

完成此操作后，我們現(xiàn)在可以在應(yīng)用程序中在明暗模式之間切換。

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