如何移除Safari中Gatsby站点自带的头部紫色背景基础样式

安全阿岳

2026-9-26

Safari浏览器iPhone/Mac端头部紫色背景修改方案

第一步：全局检索项目内的background: #5f3797代码，Gatsby项目优先排查以下位置：
- 根目录下的全局样式文件（如global.css、index.css）
- 头部导航组件对应的CSS模块、行内样式、CSS-in-JS代码
- gatsby-browser.js中注入的全局样式规则
- 引入的第三方UI组件库的主题色配置
第二步：定位到对应代码后，将颜色值替换为background: #ffffff，为了避免Safari默认样式覆盖自定义规则，可补充兼容属性：
```
background: #ffffff !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
```
第三步：检查项目的主题色元标签配置，Gatsby项目通常在gatsby-config.js的gatsby-plugin-manifest配置项、或自定义的html.js模板文件中，确保theme-color配置为白色：
```
<meta name="theme-color" content="#ffffff" />
```
第四步：修改完成后重启Gatsby开发服务，清除Safari浏览器缓存后重新测试，确认样式生效。