테마 전환 및 사용자 정의 스타일을 구현하기 위한 UniApp 구성 및 사용 가이드

/* 样式文件 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;
}

<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>

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

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

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

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