如何让iframe文本适配暗黑模式？Next.js中Tally Forms iOS适配问题

问题本质 #

iOS有个特殊行为：哪怕你的网站处于亮色模式，只要系统开了暗黑模式，Tally的iframe会无视宿主页面设置，直接套用暗黑模式样式。你写的prefers-color-scheme规则没效果，因为iOS会强制把系统配色偏好传递给跨域iframe，而Tally那边又优先遵循系统的设置。

可行解决步骤 #

1. 给iframe加color-scheme属性锁定配色 #

直接给嵌入的Tally iframe指定color-scheme，让它完全跟着你的页面走，不响应系统模式：

<!-- 静态亮色模式时使用 -->
<iframe src="你的Tally表单地址" color-scheme="light only" class="tally-app"></iframe>

<!-- Next.js动态切换主题时，结合你的主题状态变量 -->
<iframe 
  src="你的Tally表单地址"
  color-scheme={isDarkMode ? "dark only" : "light only"}
  class="tally-app"
></iframe>

color-scheme="only"会强制iframe忽略系统配色偏好，只遵循你指定的模式，这是最直接有效的方法。

2. 宿主页面锁定配色模式，阻断iOS的偏好传递 #

修改根样式，明确锁定当前页面的配色模式，避免iOS把系统偏好传递给iframe：

/* 假设你用data-theme标记页面主题 */
:root[data-theme="light"] {
  color-scheme: light only;
}
:root[data-theme="dark"] {
  color-scheme: dark only;
}

/* 尝试强制覆盖文本颜色（仅当Tally未做严格样式隔离时生效） */
.tally-app {
  color: white !important;
}

3. 直接在Tally后台配置样式 #

进入Tally的表单编辑页面，找到「自定义样式」→「暗黑模式」，手动把文本颜色设为白色，同时关闭「跟随系统」选项。这样不管宿主页面或系统是什么模式，表单都使用你设置的固定样式，从源头解决冲突。

内容的提问来源于stack exchange，提问作者Vision