如何在网页或PWA中使用Android系统颜色

可以在网页或PWA中使用Android系统颜色，从Android 13（API 33）开始，Android系统提供了全系统颜色主题的Web API支持，以下是具体的获取和使用方法：

1. 直接使用CSS系统颜色变量 #

Android 13+ 支持一系列对应系统主题色的CSS变量，无需额外逻辑，直接在样式中引用就能匹配当前系统的主题配置：

• 主色调系列：android-system-primary、android-system-primary-container
• 次要色调系列：android-system-secondary、android-system-secondary-container
• 中性色调系列：android-system-neutral、android-system-neutral-container
• 文本对比色系列：android-system-on-primary、android-system-on-background

示例代码：

/* 按钮采用系统主色调，文本用对应对比色保证可读性 */
.action-btn {
  background-color: android-system-primary;
  color: android-system-on-primary;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* 页面背景和文本色匹配系统主题 */
body {
  background-color: android-system-background;
  color: android-system-on-background;
  margin: 0;
  padding: 16px;
}

2. 通过JavaScript动态获取颜色值 #

如果需要在业务逻辑中处理系统颜色，可以用getComputedStyle获取这些变量的实际RGB/RGBA值：

// 获取系统主色调的实际颜色值
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('android-system-primary');
console.log('当前系统主色调:', primaryColor);

// 动态给元素设置系统色调
document.querySelector('.card').style.backgroundColor = 'android-system-primary-container';

3. PWA的主题适配优化 #

对于PWA，在manifest.json中配置对应系统颜色变量，能让应用的启动闪屏、状态栏颜色自动匹配系统主题：

{
  "name": "我的PWA应用",
  "short_name": "PWA",
  "theme_color": "android-system-primary",
  "background_color": "android-system-background",
  "display": "standalone"
}

注意事项 #

• 这些系统颜色变量仅在Android 13及以上版本的现代浏览器（如Chrome、Edge）中生效
• 测试时需要使用真实Android设备或Android模拟器，桌面浏览器不支持这些Android专属的CSS变量

内容的提问来源于stack exchange，提问作者J-Eibe