How to create dynamic theme switching features in Vue3

With the advancement of modern web development, user experience has become increasingly important. In this regard, implementing dynamic theme switching functions is undoubtedly an effective way to improve user experience. Through dynamic theme switching, users can choose bright themes or dark themes according to their preferences, providing a more personalized and comfortable user experience. Today, we will show you how to implement dynamic theme switching in Vue 3, using setup syntax sugar to optimize our code.

Project preparation

First, make sure that Vue 3 is already installed in your development environment. You can use Vue CLI or Vite to create a new project. Here we use Vite to start a new project.

npm init vite@latest my-vue3-app --template vue
cd my-vue3-app
npm install

After the installation is complete, open the project and use your code editor to prepare for the next steps.

Theme style

We willsrc/assetsCreate two basic theme style files below:and。

body {
    background-color: #ffffff;
    color: #333333;
}
header {
    background-color: #f0f0f0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

body {
    background-color: #1e1e1e;
    color: #f0f0f0;
}
header {
    background-color: #444444;
    padding: 10px;
    border-bottom: 1px solid #666;
}

Create dynamic theme switching function

Now that we have defined the basic style, nextsrc/componentsCreate a new component in the directory, used to implement the theme switching function.

<template>
  <div>
    <header>
      <h1>Dynamic topic switching example</h1>
      <button @click="toggleTheme">{{ currentTheme === 'light' ? 'Switch to dark theme' : 'Switch to bright color theme' }}</button>
    </header>
    <main>
      <p>Welcome to our website！You can choose the theme mode you like。</p>
    </main>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
// Theme statusconst currentTheme = ref('light');
// Switch theme functionconst toggleTheme = () => {
   =  === 'light' ? 'dark' : 'light';
};
// Listen to topic changes and add corresponding CSS classeswatch(currentTheme, (newTheme) => {
   = newTheme; // Replace the body's class  // Dynamically introduce CSS files  const linkElement = ('theme-style') || createLinkElement();
   = newTheme === 'light' ? '/src/assets/' : '/src/assets/';
});
// Create link elementsconst createLinkElement = () => {
  const link = ('link');
   = 'stylesheet';
   = 'theme-style';
   = '/src/assets/'; // Default theme  (link);
  return link;
};
// Execute when component is mounted = ; // Use bright theme by default</script>
<style scoped>
main {
    padding: 20px;
}
button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>

Detailed code explanation

In the above code, we first define a responsive variablecurrentTheme, used to save the current topic status.toggleThemeThe function is called every time the user clicks a button to switch topics.

We also monitorcurrentThemeChanges, when the topic changes, we will updatebodyofclassNameIn order to apply different styles. At the same time, we create a dynamic<link>Tags to load the corresponding CSS file, so that the correct style will be obtained whether it is a theme switching or the first loading.

Using ThemeToggle in the app

Now we cansrc/Use in the fileThemeToggleComponents:

<template>
  <div >
    <ThemeToggle />
  </div>
</template>
<script setup>
import ThemeToggle from './components/';
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Run and test

Run the project on the command line:

npm run dev

Open the browser and accesshttp://localhost:3000, you will see an interface that contains the theme toggle button. Try clicking the button to observe the changes in the theme.

Conclusion

Through the above steps, we successfully implemented a dynamic theme switching function in Vue 3. This feature not only improves the user experience, but also lays the foundation for the expansion of subsequent functions. You can further optimize and expand this feature according to your needs, such as using local storage to save the theme selected by the user, or providing different theme configurations for different pages.

This is the end of this article about creating dynamic theme switching functions in Vue3. For more related content on dynamic theme switching of vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!