[ App引擎 ] 關於蘋果iOS13深色模式

最近大家很關注深色模式，原因是蘋果發布了一條官方公告，原文https://developer.apple.com/news/?id=03042020b，一些媒體在此時也發布了“微信不適配深色模式將被蘋果下架”的消息，進而引起廣泛關注。實際上蘋果目前並未強制要求應用必須支持深色模式，只是要求從2020年4月30日開始，所有提交的應用必須基於iOS13 SDK編譯（雲編譯服務器早在去年iOS13剛發布后就已經支持）。

如果您的應用暫時不想支持深色模式，則可以不用做什么修改；如果想支持深色模式，那么首先應該從產品層面設計一下深色模式的效果，開發則可以參考以下方法：


全局配置

目前應用默認關閉了深色模式，要支持深色模式需要先在config.xml中配置interfaceStyle字段值為Automatic，參考https://docs.apicloud.com/Dev-Guide/app-config-manual#14-16。

<preference name="interfaceStyle" value="Automatic"/>

api支持

引擎和模塊的部分UI類視圖目前已經適配了深色模式，引擎的api對象下提供了getInterfaceStyle、setInterfaceStyle方法來獲取和設置當前外觀模式，同時提供了interfacestylechanged事件來監聽變化，在頁面中如果使用了引擎、模塊帶UI的視圖，則可以在監聽到變化后動態設置相關屬性。

注：使用TabLayout時，對於導航欄、tabBar的背景和文字顏色，如果沒有主動設置顏色值，則TabLayout將自動適配深色模式；若設置了，則需要自行在監聽外觀模式變化后處理。

頁面CSS處理

一種方法是將深色、淺色模式對應的頁面樣式放到單獨的兩個css文件中，通過js來動態設置link標簽引入哪個樣式文件，類似於切換主題功能；

另一種方法則是使用媒體查詢來實現，為了在網頁中適配深色模式，蘋果推出了一個新的媒體查詢規范 prefers-color-scheme，可以檢測出深色、淺色模式，如：

@media (prefers-color-scheme: dark) 
{
    body {
        
        color: #fff;
    }
}

然后可以配合使用自定義屬性的方式來支持，如

:root {
    --app-bg-color: #fff;
    --app-text-color: #000;
}
@media (prefers-color-scheme: dark) {
    :root {
        --app-bg-color: #000;
        --app-text-color: #fff;
    }
}
body{
   
    color: var(--app-text-color);
}


如果想快速支持深色模式可以使用CSS濾鏡反轉顏色，但要注意圖片也會被反轉，使用時盡量應用到具體的元素上，避免全局設置。

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(100%);
    }
}