在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。

完成此操做后，咱们如今能够在应用程序中在明暗模式之间切换。