UniApp的CSS变量主题切换方案：轻松玩转主题切换 🎨

引言

大家好，欢迎来到今天的讲座！今天我们要聊一聊如何在UniApp中使用CSS变量来实现主题切换。如果你对CSS变量还不是很熟悉，别担心，我会尽量用通俗易懂的语言来解释。相信我，这就像换衣服一样简单！😏

什么是CSS变量？

CSS变量（也叫自定义属性）是CSS中的一种新特性，允许我们在样式表中定义可重用的值。这些值可以在整个项目中使用，并且可以通过JavaScript动态修改。这就意味着我们可以轻松地为不同的主题定义一套颜色、字体等样式，然后通过切换这些变量来实现主题的切换。

举个例子，假设我们有一个按钮，它的背景色是蓝色，文字颜色是白色：

button {
  background-color: #007bff;
  color: #ffffff;
}

如果我们使用CSS变量来定义这些颜色，代码就会变成这样：

:root {
  --primary-color: #007bff;
  --text-color: #ffffff;
}

button {
  background-color: var(--primary-color);
  color: var(--text-color);
}

这样做的好处是什么呢？当我们想要切换主题时，只需要改变--primary-color和--text-color的值，所有的按钮都会自动更新！是不是很酷？😎

实现主题切换的步骤

1. 定义主题变量

首先，我们需要在项目的全局样式文件中定义一组CSS变量。这些变量将用于存储不同主题的颜色、字体等样式。为了方便管理，我们可以为每个主题创建一个单独的类名。

/* global.css */
:root {
  /* 默认主题 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #ffffff;
  --background-color: #f8f9fa;
}

.theme-dark {
  /* 深色主题 */
  --primary-color: #343a40;
  --secondary-color: #adb5bd;
  --text-color: #e9ecef;
  --background-color: #212529;
}

.theme-light {
  /* 浅色主题 */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #ffffff;
  --background-color: #f8f9fa;
}

2. 在页面中应用主题

接下来，我们需要在页面中使用这些变量。UniApp支持全局样式和局部样式，因此我们可以在App.vue中引入全局样式文件，并在需要的地方使用这些变量。

<!-- App.vue -->
<template>
  <view :class="themeClass">
    <button class="btn">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      themeClass: ''
    };
  },
  methods: {
    toggleTheme() {
      this.themeClass = this.themeClass === 'theme-dark' ? 'theme-light' : 'theme-dark';
    }
  }
};
</script>

<style scoped>
@import './static/global.css';

.btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

3. 通过JavaScript切换主题

现在我们已经定义好了主题变量和样式，接下来就是如何让用户可以选择不同的主题。我们可以通过按钮或开关来触发主题的切换。在Vue中，我们可以使用data属性来存储当前的主题，并通过methods来切换主题。

<!-- Home.vue -->
<template>
  <view>
    <button @click="toggleTheme">切换主题</button>
    <button class="btn">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      themeClass: ''
    };
  },
  methods: {
    toggleTheme() {
      this.themeClass = this.themeClass === 'theme-dark' ? 'theme-light' : 'theme-dark';
    }
  }
};
</script>

<style scoped>
@import '../static/global.css';

.btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

4. 保存用户选择的主题

为了让用户在下次打开应用时仍然保持他们选择的主题，我们可以使用localStorage或uni.setStorageSync来保存用户的主题偏好。这样，即使用户关闭了应用，再次打开时也会自动应用他们上次选择的主题。

// 在 mounted 钩子中读取保存的主题
mounted() {
  const savedTheme = uni.getStorageSync('user-theme') || '';
  this.themeClass = savedTheme;
},

// 在切换主题时保存用户的选择
methods: {
  toggleTheme() {
    this.themeClass = this.themeClass === 'theme-dark' ? 'theme-light' : 'theme-dark';
    uni.setStorageSync('user-theme', this.themeClass);
  }
}

5. 适配系统主题

除了手动切换主题，我们还可以让应用自动适配系统的主题设置。现代浏览器和操作系统都提供了对深色模式的支持，我们可以通过prefers-color-scheme媒体查询来检测用户的系统主题，并根据其选择自动应用相应的主题。

/* global.css */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #343a40;
    --secondary-color: #adb5bd;
    --text-color: #e9ecef;
    --background-color: #212529;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #ffffff;
    --background-color: #f8f9fa;
  }
}

总结

通过使用CSS变量，我们可以在UniApp中轻松实现主题切换功能。不仅代码简洁易维护，还能让用户根据自己的喜好选择不同的主题。最重要的是，CSS变量的灵活性让我们可以轻松扩展更多的主题，甚至可以根据用户的设备或环境自动调整主题。

希望今天的讲座对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言。😊

参考文档

MDN Web Docs: CSS Variables
W3C: Custom Properties for Cascading Stylesheets
UniApp 官方文档：样式与布局

感谢大家的聆听！如果你觉得这篇文章对你有帮助，别忘了点赞哦！👍