uni-app离线打包，深色模式如何配置才能生效

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app离线打包，深色模式如何配置才能生效

我根据Android原生配置设置暗黑模式，如图所示，

然后针对页面中是使用下面方式： 在common.css文件中使用 prefers-color-scheme: dark APP.vue中 plus.nativeUI.setUIStyle('auto');

@media (prefers-color-scheme: dark) {
    /* 组件适配，项目内用的组件主要是uview-plus组件 */
    .uni-picker-view-content {
        background-color: #303133;
    }
}

真机模式下这种是生效的，但是离线打包后就无效了，我该如何实现离线打包深色模式

Image Image


Harmonyos Next教程
1 回复

在uni-app中实现离线打包并支持深色模式，你需要进行一些配置和代码调整。以下是一个基本的实现步骤和相关代码示例，确保深色模式在你的应用中生效。

1. 配置 manifest.json

首先，在 manifest.json 中确保应用的基础配置正确，支持离线打包。这里主要关注的是主题配置，虽然 manifest.json 本身不直接控制深色模式，但它包含了一些基础配置。

{
  "mp-weixin": { // 示例：微信小程序配置
    "appid": "your-app-id",
    "setting": {
      "darkmode": true // 开启深色模式支持（注意：这个设置取决于平台是否支持）
    }
  }
}

2. 修改 App.vue

在 App.vue 中，你可以监听系统主题变化事件，并根据主题变化应用不同的样式。

<template>
  <App />
</template>

<script>
export default {
  onLaunch() {
    // 监听系统主题变化（适用于支持该API的平台）
    if (uni.getSystemInfoSync().system.includes('iOS') && uni.getSystemInfoSync().version.startsWith('13.')) {
      uni.getSystemTheme({
        success: (res) => {
          this.applyTheme(res.theme);
        },
        fail: () => {
          console.error('获取系统主题失败');
        }
      });

      uni.onSystemThemeChange((res) => {
        this.applyTheme(res.theme);
      });
    } else {
      // 默认主题或其他平台处理
      this.applyTheme('light'); // 或者 'dark'
    }
  },
  methods: {
    applyTheme(theme) {
      if (theme === 'dark') {
        uni.setStorageSync('theme', 'dark');
        // 应用深色模式样式，例如通过 class 或动态样式
        document.documentElement.setAttribute('data-theme', 'dark');
      } else {
        uni.setStorageSync('theme', 'light');
        document.documentElement.setAttribute('data-theme', 'light');
      }
    }
  }
};
</script>

3. 修改样式文件

在样式文件中，根据 data-theme 属性应用不同的样式。

/* global.css 或在 App.vue 的 <style> 中 */
body[data-theme="light"] {
  --background-color: #ffffff;
  --text-color: #000000;
}

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

.page {
  background-color: var(--background-color);
  color: var(--text-color);
}

总结

以上步骤展示了如何在uni-app中配置离线打包并支持深色模式。通过监听系统主题变化事件，并根据主题变化应用不同的CSS变量或类，你可以实现深色模式的切换。注意，不同平台对深色模式的支持程度不同，具体实现可能需要针对特定平台进行微调。

回到顶部