iOS渐进式Web应用程序黑暗模式启动映像？

Question

我正在尝试为我的iOS PWA的apple-touch-startup-image（启动屏幕）创建一个暗模式选项，如果启用了暗模式，它将替换apple-touch-的所有链接对我的用户而言，启动图像会变暗。

我已经考虑了这一点，因为暗模式适用于css：

@media(prefers-color-scheme: dark){ ... }

然后可以轻松地替换它们。

我创建了这个javascript，但似乎没有用：

var darksplash = window.matchMedia( "(prefers-color-scheme: dark)" );
if (darksplash.matches) {document.querySelector('link[rel="apple-touch-startup-image"]').setAttribute("href", "assets/images/splashscreens/dark.png");}

有什么想法吗？我当时以为这可能是javascript代码中的错误，我不是JavaScript的专家。

Answer 1

我对CSS或javascript不太了解，但是如果注入的代码不起作用，我将尝试在Web控制台中运行JavaScript代码。

1. 选择打开您的网站，右键单击并单击检查
2. 该框顶部有一个选项，选择控制台。
3. 运行您的JavaScript代码。

如果这行得通，则可能是您注入JavaScript代码的时机不太合适，或者您输入的JavaScript代码有误。

Answer 2

您只需要在media =“”开头的“（prefers-color-scheme：dark）和”下方的每个图像下添加另一个apple-touch-startup-image

发现于： https://github.com/onderceylan/pwa-asset-generator/issues/51