Configuration and usage guide for UniApp to implement theme switching and custom styles

UniApp Configuration and Usage Guide for Implementing Theme Switching and Custom Styles

Introduction:
UniApp is a cross-platform development framework based on Vue.js, which allows developers to use a set of codes while Conduct application development on multiple platforms. In application development, theme switching and custom styles are one of the very important functions. This article will introduce how to configure and use theme switching and custom styles in UniApp, and provide code examples.

1. Implementation of theme switching
In UniApp, we can implement the theme switching function by using CSS variables. First, we need to define some CSS variables in the global style file to control the styles of different themes.

/* 样式文件 global.scss */
:root {
  --main-color: #007bff;  // 主色调
  --text-color: #000;  // 文字颜色
  --background-color: #fff;  // 背景颜色
}

.light-theme {
  --main-color: #007bff;
  --text-color: #000;
  --background-color: #fff;
}

.dark-theme {
  --main-color: #4e4e4e;
  --text-color: #fff;
  --background-color: #000;
}

Then, in the App.vue file, we can use the computed attribute to dynamically select the class name of the theme. In this way, the applied styles will change under different themes.

<template>
  <view class="uni-app">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  computed: {
    themeClass() {
      return uni.getStorageSync('theme') || 'light-theme';
    }
  },
  methods: {
    // 切换主题
    toggleTheme() {
      const currentTheme = this.themeClass === 'light-theme' ? 'dark-theme' : 'light-theme';
      uni.setStorageSync('theme', currentTheme);
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  },
  mounted() {
    uni.setStorageSync('theme', 'light-theme');  // 默认主题为'light-theme'
  }
}
</script>

<style>
/* 全局样式 */
@import './styles/global.scss';

/* 动态选择主题的类名 */
.uni-app {
  composes: {{ themeClass }};
}
</style>

2. Configuration and use of custom styles
UniApp provides a way to configure custom styles, which can be modified through configuration files. We can create a configuration file named theme.json in the root directory of the project.

{
  "styles": {
    ".text-class": {
      "color": "#f00",
      "font-size": "24px"
    },
    ".button-class": {
      "background-color": "#007bff",
      "color": "#fff",
      "border-radius": "10px",
      "padding": "10px 20px"
    }
  }
}

Then, in components that need to use custom styles, you can use style's value binding to apply styles.

<template>
  <view>
    <text class="text-class">自定义文本样式</text>
    <button class="button-class">自定义按钮样式</button>
  </view>
</template>

<script>
export default {
  // ...
}
</script>

<style>
@import './styles/theme.json';
</style>

In the above code, we introduced the theme.json file through @import and applied the customized style to the corresponding component.

Summary:
Through the above code examples, we have learned how to configure and use theme switching and custom styles in UniApp. By setting CSS variables to switch themes and using configuration files to customize styles, our applications can be made more flexible and personalized. I hope this article has provided some help for you to implement theme switching and style customization in UniApp development.

The above is the detailed content of Configuration and usage guide for UniApp to implement theme switching and custom styles. For more information, please follow other related articles on the PHP Chinese website!