Interface beautification techniques for UniApp to implement multi-theme switching

UniApp's interface beautification techniques for realizing multi-theme switching

With the development of mobile application development, users have higher and higher demands for the aesthetics and personalization of application interfaces. Implementing multi-theme switching is a common interface beautification technique, which allows users to choose different theme styles according to their own preferences. This article will introduce how to beautify the interface of multi-theme switching in UniApp, and give corresponding code examples.

1. Preparation

Before we start, we need to prepare some necessary resources.

1. Create multiple theme style files: Create multiple style files with different themes as needed. For example, we can create a theme-default.scss file as the default theme style, and then create a theme-dark.scss file as the dark theme style.
2. Define global variables: Define a global variable in the uni.scss file to save the name of the current theme. For example, we can define a $current-theme variable with an initial value of "default".

2. Switch the theme

1. Create the theme switching component: Create a ThemeSwitch.vue component in the components directory, Used to display theme switching buttons and handle theme switching logic. The code is as follows:

<template>
  <view class="theme-switch">
    <button @click="switchTheme('default')">默认主题</button>
    <button @click="switchTheme('dark')">暗黑主题</button>
  </view>
</template>

<script>
export default {
  methods: {
    switchTheme(theme) {
      uni.setStorageSync('currentTheme', theme);
      this.$store.commit('setCurrentTheme', theme);
    },
  },
};
</script>

<style scoped>
.theme-switch {
  button {
    margin: 10px;
  }
}
</style>

2. Introduce the theme switching component in the entry page: Introduce the ThemeSwitch component in the root page (such as App.vue) , and set global styles.

<template>
  <view>
    <theme-switch></theme-switch>
    <router-view></router-view>
  </view>
</template>

<script>
import ThemeSwitch from '@/components/ThemeSwitch.vue';

export default {
  components: {
    ThemeSwitch,
  },
  mounted() {
    this.initTheme();
  },
  methods: {
    initTheme() {
      const currentTheme = uni.getStorageSync('currentTheme');
      this.$store.commit('setCurrentTheme', currentTheme || 'default');
    },
  },
};
</script>

<style>
@import "@/styles/theme-default.scss";

:root {
  --primary-color: #1890ff;
  --secondary-color: #f5222d;
  /* 其他样式变量 */
}

.view {
  background-color: var(--bg-color);
  color: var(--font-color);
}
</style>

3. Update the page style

1. Create style files: Create multiple style files in the styles directory, corresponding to the styles of different themes. . For example, you can create a theme-default.scss file for the default theme and a theme-dark.scss file for the dark theme.
2. Update style variables: In the style file of each theme, modify the corresponding style variables as needed, such as modifying --primary-color and --secondary-colorwait.

/* theme-default.scss */
$primary-color: #1890ff;
$secondary-color: #f5222d;
/* 其他样式变量 */

/* theme-dark.scss */
$primary-color: #1f1f1f;
$secondary-color: #ff4d4f;
/* 其他样式变量 */

3. Introduce the style file on the entry page: In the style tag of the root page (for example App.vue), according to the global variable# The value of ##$current-theme dynamically introduces the corresponding theme style file.

<style>
@import "@/styles/theme-#{$current-theme}.scss";

:root {
  --primary-color: $primary-color;
  --secondary-color: $secondary-color;
  /* 其他样式变量 */
}

.view {
  background-color: var(--bg-color);
  color: var(--font-color);
}
</style>

4. Summary

Through the above steps, we can achieve the effect of beautifying the interface by switching themes in UniApp. First, introduce the theme switching component into the entrance page and set the global style in the

style tag of the root page; then, process the theme switching logic in the theme switching component and display the theme switching button on the page; Finally, style variables for different themes are defined in the corresponding style files and introduced into the application through global variables. In this way, users can choose different theme styles according to their own preferences.

Code examples can help readers better understand how to implement interface beautification techniques for multi-theme switching in UniApp. However, it should be noted that in actual development, the code may need to be modified and expanded according to specific needs. I hope this article can be helpful to readers, thank you for reading!

The above is the detailed content of Interface beautification techniques for UniApp to implement multi-theme switching. For more information, please follow other related articles on the PHP Chinese website!