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

原文： https://medium.com/js-dojo
做者：Sunil Joshi

微信搜索【前端全棧開發者】關注這個脫髮、擺攤、賣貨、持續學習的程序員，第一時間閱讀最新文章，會優先兩天發表新文章。關注便可大禮包，準能爲你節省很多錢！

在本文中，我將在不使用任何庫的狀況下將darkLight模式功能實現到咱們的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;
}
h1,
h2,
h3,
h4,
h5,
h6,
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>
  <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實例中。而後，咱們建立一個按鈕，該按鈕將調用咱們在 theme.js 文件中建立的 _darkThemeSwitch。

完成此操做後，咱們如今能夠在應用程序中在明暗模式之間切換。