在Vue Vite應用程序中實現暗

最近整理了一份优质视频教程资源,想要的可以关注我然后私信“666”即可免费领取哦!如果文章对你有所启发和帮助,可以点个关注、收藏、转发,也可以留言讨论,这是对作者的最大鼓励。

在本文中,我将在不使用任何库的情况下将dark\Light模式功能实现到我们的Vue Vite应用程序中。

我们将首先创建一个简单的Vite应用程序,然后为我们的应用程序设置一个简单的用户界面。在创建我们的Vue应用程序之前,我想提到WrapPixel提供的一些很棒的免费Vue模板,它们可以免费下载并用于个人和商业用途。他们可以节省你的时间,因为你可以直接在你的项目中使用他们令人惊叹的用户界面,这将给你的应用程序带来惊人的外观和感觉,所以一定要去看看。

创建一个Vuejs Vite应用程序

要设置Vite应用程序,请打开您的终端并输入以下内容:

<code>npm init vite-app themeswitcher/<code>

这个命令将搭建一个新的vite应用程序,然后进入项目目录安装项目依赖项:

<code>cd themeswitcher
npm install/<code>

安装后,我们现在可以使用 npm run dev 命令运行我们的应用程序:

<code>code . && npm run dev/<code>

code . 命令将以VS Code打开我们的应用程序。

我们的应用程序现在将在端口3000上运行。

在Vue Vite应用程序中实现暗/亮模式

随着应用程序的启动和运行,我们现在可以创建CSS。在 public 目录内创建一个 css/dark.css 文件,这是我们将在黑暗模式环境中存储所有CSS代码的地方。

在dark.css文件中添加以下代码:

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

现在将在head中创建一个link标签将其设置为我们创建的 dark.css 文件,以便可以应用在此定义的所有样式。

我们将使用Javascript类来执行此操作,在src目录中创建 src/theme.js 文件,并添加以下代码:

<code>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()
        }
    }
}/<code>

我们创建3种方法:

  • _addDarkTheme()

    :这会将link标签添加到应用程序的HTML head中。
  • _removeDarkTheme()

    :这将删除已添加到HTML head的link标签。
  • _darkThemeSwitch()

    :这将切换添加和删除方法,以在我们的HTML head中添加和删除link标签。

我们可以继续在Vue.js组件中使用此方法。

编辑 components/HelloWorld.vue 中的代码,如下所示:

<code>
  

Vite is the future of Frontend Developement.

Thanks to Evan You
/<code>

我们引入 themeChanger 类的实例,然后将其存储在Vue.js data实例中。然后,我们创建一个按钮,该按钮将调用我们在 theme.js 文件中创建的 _darkThemeSwitch。

完成此操作后,我们现在可以在应用程序中在明暗模式之间切换。

在Vue Vite应用程序中实现暗/亮模式

微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员,第一时间阅读最新文章,会优先两天发表新文章。关注即可大礼包,准能为你节省不少钱!


分享到:


相關文章: