VueVite应用中实现dark-light模式

原文：https://medium.com/js-dojo作者：SunilJoshi微信搜索【前端全栈开发者】关注本掉毛，摆地摊，卖货，持续学习的程序员第一时间阅读最新文章，过两天会优先发布新文章。关注大礼包，让你省钱！在本文中，我将在不使用任何库的情况下将darkLight模式功能实现到我们的VueVite应用程序中。我们将首先创建一个简单的Vite应用程序，然后为我们的应用程序设置一个简单的用户界面。在创建我们的Vue应用程序之前，我想提一下WrapPixel提供的一些很棒的免费Vue模板，这些模板可以免费下载并用于个人和商业用途。它们可以节省您的时间，因为您可以直接在您的项目中使用它们令人惊叹的UI，这将使您的应用程序具有惊人的外观和感觉，因此请务必检查一下。创建一个VuejsVite应用程序要设置一个Vite应用程序，请打开您的终端并输入以下内容：npminitvite-appthemeswitcher此命令将构建一个新的vite应用程序，然后进入项目目录安装项目依赖项：cdthemeswitchernpm之后安装，我们现在可以使用npmrundev命令运行我们的应用程序：代码。&&npm运行开发代码。该命令将在VSCode中打开我们的应用程序。我们的应用程序现在将在端口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;}现在将在头部创建一个链接标签，将其设置为我们创建的dark.css文件，以便可以在此处应用所有定义的样式。我们将使用Javascript类来执行此操作，在src目录中创建一个src/theme.js文件，并添加以下代码：exportdefaultclassthemeChanger{/***@constructor*/constructor(){}_addDarkTheme(){constdarkThemeLinkEl=document.createElement('link')darkThemeLinkEl.setAttribute('rel','stylesheet')darkThemeLinkEl.setAttribute('href','./css/dark.css')darkThemeLinkEl.setAttribute('id','dark-theme-style')constdocHead=document.querySelector('head')docHead.append(darkThemeLinkEl)}_removeDarkTheme(){constdarkThemeLinkEl=document.querySelector('#dark-theme-style')constparentNode=darkThemeLinkEl.parentNodeparentNode.removeChild(darkThemeLinkEl)}_darkThemeSwitch(){constdarkThemeLinkEl=document.querySelector('#dark-theme-style')if(!darkThemeLinkEl){this._addDarkTheme()}else{this._removeDarkTheme()}}}我们创建3个方法：_addDarkTheme()：这会将链接标记添加到应用程序的HTML头部_removeDarkTheme()：这将删除已添加到HTML头部的链接标记。_darkThemeSwitch()：这会切换添加和删除方法，以在我们的HTML头部添加和删除链接标签。我们可以在Vue.js组件中继续使用这个方法。编辑components/HelloWorld.vue中的代码如下：我们导入一个themeChanger类的实例，然后将它存储在Vue.js数据实例中。然后我们创建一个按钮，它将调用我们在theme.js文件中创建的_darkThemeSwitch。完成此操作后，我们现在可以在应用程序内切换明暗模式。