UniApp的暗黑模式自动适配：一场“光明与黑暗”的技术讲座

大家好，欢迎来到今天的UniApp技术讲座！今天我们要探讨的是一个非常酷炫的话题——暗黑模式自动适配。想象一下，当用户在深夜刷手机时，突然被刺眼的白屏闪瞎双眼，是不是很不友好？别担心，有了暗黑模式，用户可以在夜间享受更加舒适的阅读体验，而我们开发者也能通过简单的代码实现这一功能。

什么是暗黑模式？

简单来说，暗黑模式（Dark Mode）就是一种以深色背景为主的界面设计风格。它不仅能让用户的眼睛在低光环境下更舒适，还能减少设备的电量消耗（尤其是OLED屏幕）。更重要的是，暗黑模式已经成为现代应用不可或缺的一部分，苹果、谷歌等大厂都在积极推动这一趋势。

为什么要在UniApp中实现暗黑模式？

UniApp 是一个基于 Vue.js 的跨平台开发框架，能够帮助我们快速构建 iOS、Android、H5 和小程序等多个平台的应用。既然 UniApp 支持这么多平台，那为什么不为用户提供一个更好的视觉体验呢？通过实现暗黑模式，我们可以：

提升用户体验
减少眼睛疲劳
节省电量
增加应用的美观度

暗黑模式的实现思路

在 UniApp 中实现暗黑模式并不复杂，主要分为两步：

检测用户的系统设置：判断用户是否启用了系统的暗黑模式。
动态切换样式：根据用户的设置，动态调整应用的主题颜色。

1. 检测系统暗黑模式

UniApp 提供了 uni.getSystemInfo API 来获取设备的系统信息，包括是否启用了暗黑模式。我们可以通过这个 API 获取用户的偏好设置。

uni.getSystemInfo({
  success: function (res) {
    console.log('系统主题:', res.theme); // light 或 dark
  }
});

此外，从 UniApp 3.0 开始，还提供了一个更方便的 API——uni.onThemeChange，它可以监听系统主题的变化，并实时更新应用的样式。

uni.onThemeChange(function (res) {
  console.log('主题已更改:', res.theme); // light 或 dark
});

2. 动态切换样式

接下来，我们需要根据用户的主题设置，动态切换应用的样式。这里有两个常见的实现方式：

方式一：使用 CSS 变量

CSS 变量（也叫自定义属性）可以让我们轻松地管理不同主题下的颜色。我们可以在全局样式文件中定义一套浅色和深色的主题变量，然后根据用户的设置来切换这些变量。

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --background-color: #1a1a1a;
  --text-color: #ffffff;
}

然后，在页面的根元素上添加 data-theme 属性，根据用户的主题设置动态切换：

function setTheme(theme) {
  const body = document.body;
  if (theme === 'dark') {
    body.setAttribute('data-theme', 'dark');
  } else {
    body.removeAttribute('data-theme');
  }
}

方式二：使用 Vue 的响应式数据

如果你更喜欢使用 Vue 的响应式特性，可以通过 v-bind:class 或 v-bind:style 来动态绑定样式。首先，我们在 Vuex 或组件的 data 中定义一个 isDarkMode 变量，然后根据用户的设置来切换这个变量的值。

export default {
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
    }
  }
};

接着，在模板中使用 v-bind:class 来动态切换样式：

<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <p>这是我的应用内容</p>
  </div>
</template>

<style>
.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}
</style>

小技巧：自动适配 H5 和小程序

在 H5 和小程序中，暗黑模式的实现方式略有不同。对于 H5，我们可以使用 prefers-color-scheme 媒体查询来自动适配用户的系统设置。

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --text-color: #ffffff;
  }
}

而对于小程序，我们可以通过 wx.getSystemInfoSync() 来获取当前的主题设置，并在页面加载时进行适配。

const systemInfo = wx.getSystemInfoSync();
if (systemInfo.theme === 'dark') {
  // 切换到暗黑模式
}

实战演练：创建一个完整的暗黑模式示例

为了让大家更好地理解如何在 UniApp 中实现暗黑模式，我们来创建一个简单的示例应用。这个应用将包含两个页面：首页和设置页。用户可以在设置页中手动切换主题，同时应用也会根据系统的主题设置自动适配。

1. 创建项目结构

my-app/
├── pages/
│   ├── index.vue
│   └── settings.vue
├── App.vue
└── main.js

2. 编写全局样式

在 App.vue 中定义全局样式，并使用 CSS 变量来管理主题颜色。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

[data-theme="dark"] {
  --background-color: #1a1a1a;
  --text-color: #ffffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>

3. 实现首页

在 index.vue 中展示一些简单的文本内容。

<template>
  <div class="container">
    <h1>欢迎来到我的应用</h1>
    <p>这是一个支持暗黑模式的应用。</p>
  </div>
</template>

<script>
export default {
  name: "IndexPage"
};
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}
</style>

4. 实现设置页

在 settings.vue 中添加一个按钮，允许用户手动切换主题。

<template>
  <div class="container">
    <h1>设置</h1>
    <button @click="toggleDarkMode">
      {{ isDarkMode ? '切换到浅色模式' : '切换到暗黑模式' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    toggleDarkMode() {
      this.isDarkMode = !this.isDarkMode;
      this.$emit("themeChanged", this.isDarkMode);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

5. 监听主题变化

在 main.js 中监听系统的主题变化，并自动切换应用的主题。

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  created() {
    // 获取系统主题
    uni.getSystemInfo({
      success: (res) => {
        this.setTheme(res.theme);
      }
    });

    // 监听主题变化
    uni.onThemeChange((res) => {
      this.setTheme(res.theme);
    });
  },
  methods: {
    setTheme(theme) {
      const body = document.body;
      if (theme === 'dark') {
        body.setAttribute('data-theme', 'dark');
      } else {
        body.removeAttribute('data-theme');
      }
    }
  }
}).$mount('#app');

总结

通过今天的讲座，我们学习了如何在 UniApp 中实现暗黑模式的自动适配。无论是通过 CSS 变量还是 Vue 的响应式数据，都能轻松实现这一功能。最重要的是，我们可以通过 uni.getSystemInfo 和 uni.onThemeChange 等 API，确保应用能够根据用户的系统设置自动切换主题。

希望大家能在自己的项目中尝试实现暗黑模式，给用户带来更好的体验！如果有什么问题，欢迎随时留言讨论 😊

参考资料：

[MDN Web Docs – prefers-color-scheme](MDN Web Docs)
W3C – CSS Custom Properties for Cascading Variables Module Level 1

希望这篇文章对你有所帮助！如果有任何疑问，欢迎继续提问！✨