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

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

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

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

npm init vite-app themeswitcher 

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

cd themeswitcher 
npm install 

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

code . && npm run dev 

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

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

 

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

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

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

現(xiàn)在將在head中創(chuàng)建一個link標簽將其設(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()：這會將link標簽添加到應(yīng)用程序的HTML head中。
• _removeDarkTheme()：這將刪除已添加到HTML head的link標簽。
• _darkThemeSwitch()：這將切換添加和刪除方法，以在我們的HTML head中添加和刪除link標簽。

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

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

<template> 
  <h3>Vite is the future of Frontend Developement.</h3> 
  <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實例中。然后，我們創(chuàng)建一個按鈕，該按鈕將調(diào)用我們在 theme.js 文件中創(chuàng)建的 _darkThemeSwitch。

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