动态 UI API

从您的 Web 应用在 Android 上动态更改状态栏颜色等原生 UI 元素。

WebViewGold 允许您在 Web 应用中动态定制 UI 元素。这些元素可能包括状态栏、底部栏（iOS）、导航栏（Android）和下拉刷新（iOS）。WebViewGold 包含以下命令来动态定制这些元素：

• statusbarcolor://
  • 用于自动更改状态栏及其他所有相关 UI 元素颜色的主命令，例如状态栏文字颜色、底部栏颜色（iOS）、导航栏颜色（Android）等。
• statusbartextcolor://
  • 允许您手动更改状态栏的文字颜色（iOS 和 Android）。
• bottombarcolor://
  • 如果存在底部栏（iOS）或导航栏（Android）UI 元素，则允许您手动更改其颜色。
• navbartextcolor://
  • 允许您手动更改 Android 上导航栏的文字颜色。iOS 上将忽略该请求（iOS 上的底部栏没有文字）。
• hidebars://
  • 允许您隐藏状态栏和导航栏的背景。

更改状态栏的颜色（并自动更改其他 UI 元素）：

• RGB = {red, green, blue}

<script>
// Example: red
window.location.href = "statusbarcolor://255,0,0";
</script>

更改状态栏文字的颜色：

• "white"
• "black"

<script>
// Example: white text
window.location.href = "statusbartextcolor://white";
// Example: black text
window.location.href = "statusbartextcolor://black";
</script>

更改导航栏的颜色：

• RGB = {red, green, blue}

<script>
// Example: red
window.location.href = "bottombarcolor://255,0,0";
</script>

更改导航栏文字的颜色：

• "white"
• "black"

<script>
// Example: white text
window.location.href = "navbartextcolor://white";
// Example: black text
window.location.href = "navbartextcolor://black";
</script>

隐藏状态栏和底部栏

<script>
// Example: hide the bars from view
window.location.href = "hidebars://on";
// Example: redisplay the bars after being hidden
window.location.href = "hidebars://off";
</script>

检测深色模式（JavaScript 变量 isDarkMode）

为了让动态 UI 颜色适配用户的系统主题，WebViewGold 会在每个页面加载完成后自动注入 JavaScript 变量 isDarkMode（true 或 false）。示例：

<script>
if (typeof isDarkMode !== "undefined" && isDarkMode) {
    // 深色模式：例如设置深色状态栏
    window.location.href = "statusbarcolor://0,0,0";
    window.location.href = "statusbartextcolor://white";
} else {
    // 浅色模式
    window.location.href = "statusbarcolor://255,255,255";
    window.location.href = "statusbartextcolor://black";
}
</script>

注意：您也可以在 Web 应用中使用标准 CSS 媒体查询 prefers-color-scheme。当您想通过 JavaScript 触发上述 WebViewGold UI API 时，注入的 isDarkMode 变量非常方便。