举手干货 | uniapp主题切换功能：scss变量+require方法

前端

2023-07-06 05:38:25

使用 Scss 变量和 Require 实现 Uniapp 主题切换

正文

1. 准备工作

首先，确保已完成以下步骤：

安装 Uniapp CLI
创建新的 Uniapp 项目
安装 Scss
安装 Require

2. 创建 Scss 变量文件

创建一个 Scss 变量文件（例如 variables.scss），其中定义颜色变量：

$primary-color: #409eff;
$secondary-color: #66b1ff;
$text-color: #333;
$background-color: #fff;

3. 在 App.vue 中引入 Scss 变量文件

在 App.vue 中，引入 Scss 变量文件：

<style>
  @import "~/styles/variables.scss";
</style>

4. 在组件中使用 Scss 变量

在组件中，使用 Scss 变量控制外观：

<template>
  <button class="button">按钮</button>
</template>

<script>
export default {
  name: "Button",
  data() {
    return {
      primary: true
    };
  },
  computed: {
    style() {
      if (this.primary) {
        return {
          backgroundColor: $primary-color,
          borderColor: $secondary-color
        };
      } else {
        return {
          backgroundColor: $secondary-color,
          borderColor: $primary-color
        };
      }
    }
  }
};
</script>

<style>
.button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
}
</style>

5. 使用 Require 切换主题

在 App.vue 中，使用 Require 切换主题：

export default {
  data() {
    return {
      theme: 'default'
    };
  },
  methods: {
    switchTheme() {
      if (this.theme === 'default') {
        this.theme = 'dark';
        require('~/styles/dark.scss');
      } else {
        this.theme = 'default';
        require('~/styles/default.scss');
      }
    }
  }
};