Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to achieve dark / bright mode in Vue Vite applications", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to achieve dark / bright mode in Vue Vite applications" this article.

In this article, I will implement the dark\ Light schema functionality into our Vue Vite application without using any libraries.

We will first create a simple Vite application, and then set up a simple user interface for our application. Before creating our Vue application, I'd like to mention some great free Vue templates provided by WrapPixel that can be downloaded for free and used for personal and business use. They can save you time because you can use their amazing user interface directly in your project, which will give your application an amazing look and feel, so be sure to check it out.

Create a Vuejs Vite application

To set up the Vite application, open your terminal and enter the following:

Npm init vite-app themeswitcher

This command will build a new vite application and then go to the project directory to install the project dependencies:

Cd themeswitcher npm install

After installation, we can now use the npm run dev command to run our application:

Code. & & npm run dev

Code. The command will open our application as VS Code.

Our application will now run on port 3000.

With the application up and running, we can now create a CSS. Create a css/dark.css file in the public directory, which is where we will store all the CSS code in the dark mode environment.

Add the following code to the dark.css file:

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

Now we will create a link tag in head and set it to the dark.css file we created so that all the styles defined here can be applied.

We will use the Javascript class to do this, create the src/theme.js file in the src directory, and add the following 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 = roomThemeLinkEl[ XSS _ clean] parentNode.removeChild (darkThemeLinkEl)} _ darkThemeSwitch () {const darkThemeLinkEl = document.querySelector ('# dark-theme-style') If (! darkThemeLinkEl) {this._addDarkTheme ()} else {this._removeDarkTheme ()}}

Let's create three methods:

_ addDarkTheme (): this adds the link tag to the application's HTML head.

_ removeDarkTheme (): this removes the link tag that has been added to the HTML head.

_ darkThemeSwitch (): this will switch the add and remove methods to add and remove link tags in our HTML head.

We can continue to use this method in the Vue.js component.

Edit the code in components/HelloWorld.vue as follows:

Vite is the future of Frontend Developement. Thanks to Evan You switch 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 ();},},}

We introduce an instance of the themeChanger class and store it in the Vue.js data instance. Then we create a button that invokes the _ darkThemeSwitch we created in the theme.js file.

With this done, we can now switch between shading modes in the application.

The above is all the contents of the article "how to implement Dark / Light Mode in Vue Vite applications". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.