如何移除外部嵌入表单的字体样式并适配WordPress深色模式？

你可以通过两种方案覆盖甚至完全剥离HubSpot表单自带的默认样式，实现和站点深色模式的同步适配：

方案1：强制覆盖表单默认样式（适用仅需适配深色模式、不需要大改表单基础样式的场景） #

HubSpot嵌入表单自带的内联样式优先级较高，你可以结合站点深色模式的触发类名（通常主题的深色模式激活后会在body或者根容器上添加类似.dark-mode/.wp-dark-mode-active的类，可通过F12开发者工具自行确认），写高优先级的CSS覆盖原有样式，示例代码如下：

/* 需将.dark-mode替换为你站点实际的深色模式激活类名 */
.dark-mode .hs-form fieldset {
  border-color: #333 !important;
  background: transparent !important;
}
.dark-mode .hs-form input, 
.dark-mode .hs-form textarea,
.dark-mode .hs-form select {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
  border: 1px solid #444444 !important;
}
.dark-mode .hs-form label {
  color: #eeeeee !important;
}
.dark-mode .hs-form .hs-button {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
}

你可以根据自身站点的深色模式配色体系，调整对应属性的色值，所有属性后加!important是为了覆盖HubSpot自带的高优先级内联样式
将上述CSS添加到WordPress后台「外观-自定义-额外CSS」中，保存后清理缓存即可生效。

方案2：完全剥离HubSpot默认样式（适用需要完全自定义表单样式、和站点设计体系100%对齐的场景） #

HubSpot的表单嵌入代码原生支持关闭默认CSS加载，你只需要修改你页面上的HubSpot嵌入代码，在hbspt.forms.create的配置参数中添加css: ""即可，示例代码如下：

hbspt.forms.create({
  region: "na1",
  portalId: "替换为你自己的HubSpot门户ID",
  formId: "替换为你自己的表单ID",
  css: "", // 添加该行即可停止加载HubSpot官方默认样式
  target: "#hubspot-form-container"
});

关闭默认样式后，表单不会自带任何样式，你可以按照站点原生表单的样式规则，直接写通用表单样式，浅色、深色模式的适配逻辑和你站点原生表单完全一致即可。

生效注意事项 #

• 修改完样式或者嵌入代码后，如果你使用了缓存插件、CDN服务，需要先清理静态资源缓存，再清理浏览器缓存才能看到最新效果
• 可以通过浏览器F12开发者工具的元素选择功能，直接选中表单内的对应元素，查看HubSpot自带的选择器名称，针对性修改覆盖会更精准

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