uni-app nvue页面web-view组件加载的html页面似乎不能适配@media (prefers-color-scheme: dark)

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

uni-app nvue页面web-view组件加载的html页面似乎不能适配@media (prefers-color-scheme: dark)

问题描述

nvue页面加了plus.nativeUI.setUIStyle('auto')也不行，Hbuilder 4.44版本

项目创建方式 开发环境 版本号
Hbuilder 4.44
Harmonyos Next教程
4 回复

测试过其他版本吗，是一直不支持，还是这个版本有问题？提供个复现工程吧。


你好，看下下方评论

之前版本不清楚，4.44使用了才发现的，看下附件，index.nvue

在uni-app中使用nvue页面的web-view组件时，确实可能会遇到一些适配问题，尤其是涉及到CSS媒体查询如@media (prefers-color-scheme: dark)时。这是因为nvue页面主要基于Weex引擎，而Weex引擎对CSS的支持相对有限，尤其是高级的CSS功能。

不过，你仍然可以通过一些方法来实现对暗色模式的适配。以下是一个可能的解决方案，它涉及在HTML页面中手动检测用户的系统主题，并相应地调整样式。

HTML页面代码示例

首先，在你的HTML页面中，你可以使用JavaScript来检测用户的系统主题，并设置一个全局变量或类名来反映这一点。然后，你可以基于这个变量或类名来应用不同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <style>
        body {
            background-color: white;
            color: black;
        }
        body.dark-mode {
            background-color: black;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // Function to detect dark mode
        function applyDarkMode() {
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        }

        // Apply dark mode on page load
        window.addEventListener('load', applyDarkMode);

        // Optionally, listen for media query changes
        if (window.matchMedia) {
            const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
            mediaQueryList.addEventListener('change', applyDarkMode);
        }
    </script>
</body>
</html>

在uni-app中使用

确保你的uni-app项目中的nvue页面正确加载了这个HTML页面。例如：

<template>
  <div>
    <web-view src="https://your-html-page-url.com"></web-view>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

通过上述方法，你可以在HTML页面中手动处理暗色模式的适配，而不依赖于nvue页面或Weex引擎对@media (prefers-color-scheme: dark)的直接支持。这种方法虽然增加了一些JavaScript代码，但提供了更高的灵活性和兼容性。

回到顶部